38190

本篇文章主要记录一些css常见的选择器的区别和用法,如相邻兄弟选择器(+)、兄弟选择器(>)、子选择器(+)、:nth-child()等,掌握了这些,可以帮助我们在前端开发中事半功倍。

相邻兄弟选择器(+)

定义:相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

html代码:

    <p>这里是第一个p标签</p>
    <p>这里是第二个p标签</p>
    <h2>标题H2</h2>
    <p>这里是第三个p标签</p>
    <p>这里是第四个p标签</p>
    <p>这里是第五个p标签</p>
复制代码

css样式:

  h2+p {color: red; }
复制代码

结果: < li > List item 1 </ li > < li > List item 2 </ li > < li > List item 3 </ li > < li > List item 1 </ li > < li > List item 2 </ li > < li > List item 3 </ li > 复制代码

li + li {color:red;}
复制代码

结果:

一开始特别纳闷为啥“List item 2”和“List item 3”都被选中了~~~

首先分析选择器样式:li+li{},字面意思是选取所有位于li标签后的第一个li元素

  • 很显然第一个li不会被选中,因为它前面不是li
  • 第二个li会被选中,因为它是第一个li标签紧邻的li标签
  • 第三个li也会被选中,因为第三个li标签的上一个标签也是li标签,也满足li+li{}的条件:li标签后的第一个li标签
  • 正因为css选择器的样式为li+li{},所以代码中的li标签就可以一直套用这个“公式”。

    注:前端面包屑导航中经常用到该选择器。

    兄弟选择器(~),又称匹配选择器

    定义:作用是查找某一个指定元素的后面的 所有兄弟结点

    通过这两个例子,可以发现虽然这两个选择器都表示兄弟选择器,但是‘+’选择器则表示某元素后相邻的兄弟元素,也就是紧挨着的,是单个的(特殊情况:循环多个)。而‘~’选择器则表示某元素后所有同级的指定元素,强调所有的。

    子选择器(>)

    定义:只能选择作为某元素儿子元素的元素(直接子元素),不包括孙元素、曾孙元素等等等。

    :first-child

    定义:用于选取属于其父元素的首个子元素的指定选择器

    嗯,乍一看好像说的不是很明白,因此这个选择器很容易让人误解,通常会有两种误解:

  • 误解一:认为E:first-child选中E元素的第一个子元素。
  • 误解二:认为E:first-child选中E元素的父元素的第一个E元素。
  • 正确的理解应该是:只要E元素是它的父级的第一个子元素,就选中。它需要同时满足两个条件,一个是“ 第一个子元素 ”,另一个是“ 这个子元素刚好是E ”。

    <style>
    span:first-child{color: red;}
    p:first-child{color: blue;} /*p元素的父元素的第一个子元素是div而不是p元素,因此该样式不起作用*/
    i:first-child{color: orange;}
    </style>
    <div class="demo">
    <div>.demo的第一个子元素是div</div>
    <!--第一个span元素是它的父级P元素的第一个span,颜色变红色-->
    <p><span>第一个span</span>第一个段落P<span>第二个span</span></p>
    <!--第一个i元素是它的父级a元素的第一个i,颜色变橙色-->
    <p>一个链接<i>第一个i元素</i></p>
    <!--第二个i元素是它的父级a元素的第一个i,颜色变橙色-->
    <p>一个链接<i>第二个i元素</i></p>
    <p>一个链接</p>
    </div>
    复制代码

    效果:

    :nth-child(n)

    定义:该选择器选取父元素的第 N 个子元素, 与类型无关

    <!DOCTYPE html>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    p:nth-child(2)
    	background:#ff0000;
    </style>
    </head>
    <h1>这是一个标题</h1>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
    <p>这是第四个段落。</p>
    <p><b>注意:</b> Internet Explorer 8 以及更早版本的浏览器不支持 :nth-child()选择器.</p>
    </body>
    </html>
    复制代码

    效果:

    :nth-child(n)的详细用法:

    nth-child(3) 表示选择列表中的第三个元素。

    nth-child(2n)表示列表中的偶数标签,即选择第2、第4、第6……标签

    nth-child(2n-1) 表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签

    nth-child(n+3) 表示选择列表中的标签从第3个开始到最后(>=3)

    nth-child(-n+3) 表示选择列表中的标签从0到3,即小于3的标签(<=3)

    nth-last-child(3) 表示选择列表中的倒数第3个标签

    :nth-of-type(n)

    定义:选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素, 与元素类型有关

    <!DOCTYPE html>
    <style> 
    p:nth-of-type(2)
    background:#ff0000;
    </style>
    </head>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    </body>
    </html>
    复制代码

    效果:

    属性选择器

    定义:可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

    < style type = "text/css" > [title~=hello] color :red; </ style > </ head > < h1 > 可以应用样式: </ h1 > < h2 title = "hello world" > Hello world </ h2 > < p title = "student hello" > Hello W3School students! </ h1 > </ body > </ html > 复制代码

    结果:

    分类:
    前端
    标签: