CSS3结构伪类选择器

有这么一段样式:

<ul>
   <li>第一个</li>
   <li>第二个</li>
   <li>第三个</li>
   <li>第四个</li>
   <li>第五个</li>
</ul>

如果想选择第一个li,那么就用first-child(第一个孩子)。语法:

ul li:first-child {
    color: red;
}

如果想选择最后一个li,那么就用last-child(最后一个孩子)。语法:

ul li:last-child {
    color: red;
}

如果想选择某一个li,那么就用nth-child(n)。nth-child(n)选择某个父元素的一个或多个特定的子元素!

  • n可以为数字、关键词或公式
  • n如果是数字,就是选择第n个子元素。里面的数字从1开始……
  • n可以是关键字:even偶数,odd奇数
  • n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)

语法:

ul li:nth-child(2) {
    color: red;
}

意思就是第二个li的颜色改为红色!n如果是数字就代表选中第几个。

语法:

ul li:nth-child(odd) {
    color: red;
}

意思就是第一个、第三个、第五个li的颜色改为红色!(odd选全部奇数行,偶数同理)

语法:

ul li:nth-child(n) {
    color: red;
}

意思就是所有li的颜色改为红色!(n代表全部)

n的公式如下:

公式取值
2n偶数
2n+1奇数
5n5、10、15……
n+5从第5个开始(包含第5个)到最后
-n+5前5个(包含第5个)

nth-child(n)与nth-of-type(n)的区别

先看下面这个例子:

<article>
  <p>光头强</p>
  <div>熊大</div>
  <div>熊二</div>
</article>

当我们书写article div:nth-child(1) {color:red;}会让熊大变颜色吗?答案是不会的!原因是因为nth-child会把所有的盒子都排列序号,代码在执行的时候首先看:nth-child(第一个孩子),之后回去看前面声明的选择器(div)。意思就是说先看的是p标签,因为是第一个孩子。当nth-child执行完毕后回去看前面声明的选择器的时候,发现不是p而是div,第一个孩子与声明的选择器不符合,所有不会变颜色!

而当我们书写article div:nth-of-type(1) {color:red;}会让熊大变颜色吗?答案是会的!原因是因为nth-of-type会把指定的元素的盒子排列序号,执行的时候首先看div(指定声明的元素),之后回去看nth-of-type(1)。意思就是说先看的是声明的div,然后看在div的第几个孩子。所有会变颜色!

nth-child(1)和nth-of-type(1)的执行过程是截然相反的!

总结:

  • 结构伪类选择器一般用于选择父级里面的第几个孩子
  • nth-child对父元素里面的所有孩子排序选择(序号是固定的)先找到第几个孩子,然后看看是否和E(指定的元素)匹配
  • nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子
  • 关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式
  • 如果是无序列表,我们肯定用nth-child更多
  • 类选择器、属性选择器、伪类选择器,权重为10

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信