CSS伪类选择器nth-child 和nth-of-type

首先要说明的一点是：css中的伪类选择器还是少用为妙，复杂的css选择器（层级关系较深，伪类等）的性能并不好，主要应该影响的还是浏览器渲染时候的回流（reflow）和重绘（repain）的等的性能（个人理解）。

然后要讲正题啦！

nth-of-type和nth-child这两个选择器是很容易混淆的两个伪类选择器, 功能都是用来选择父元素的第几个孩子。

nth-child
假设有一个无序列表如下：

<ul>
    <li>
        <a href="#">United Kingdom</a>
    </li>
    <p>
        <a href="#">china</a>
    </p>
    <li>
        <a href="#">Germany</a>
    </li>
    <p>
        <a href="#">United Kingdom</a>
    </p>
    <li>
        <a href="#">Finland</a>
    </li>
    <li>
        <a href="#">Russia</a>
    </li>
    <li>
        <a href="#">Spain</a>
    </li>
    <li>
        <a href="#">Poland</a>
    </li>
</ul>

我们需要将它的偶数位置的li元素中a标签内容的颜色设置成红色

<style>
     li:nth-child(2n)>a {
         color: red;
     }
 </style>

效果图如下：
在这里插入图片描述
这里要注意的是nth-child(2n)中的n是从0开始的，而ul列表的第一个元素的index是1。因为 li:nth-child(2n)选择的是父元素ul的第0,2,4,6,…个子元素（这里不存在第0个元素，所以实际上是ul的第2,4,6,…位置的子元素），并且（着重注意），也就是只能选择上ul的偶数位置的li元素，那么这个偶数位上如果是除li外的其他元素，是选择不上的。因此这里的第2个和第4个p元素并没有被选上，这也是我们在实际开发中经常发现nth-child伪类选择器失效的情况。

nth-of-type
如果用nth-of-type来实现上面的功能，得到的效果是下面这样的：

我们可以发现，之前没有被选上的第2个li元素在这里被选上了。这是因为nth-of-type选择的是父元素的第偶数个li元素，也就是无论中间有没有其他的元素都不管，我们关心的仅仅是li元素在所有li元素中它排第几，而不关心它是它父元素的第几个子元素。

因此nth-child和nth-of-type的区别就一目了然了，nth-child相对来说更加严格，因此使用nth-of-type会规避掉一些选择不上的问题。

还有一个需要注意的问题是：如果我们需要选择父元素的第几个同类元素，而不关心这个元素是什么元素的话，可以进行父标签层级的限制，而不是当前元素层级的限制。

ul :nth-of-type(2n)>a {
	color: red;
}

 <ul>
     <li>
         <a href="#">United Kingdom</a>
     </li>
     <p>
         <a href="#">china</a>
     </p>
     <li>
         <a href="#">Germany</a>
     </li>
     
     <p>
         <a href="#">United Kingdom</a>
     </p>
     <p>
         <a href="#">United Kingdom</a>
     </p>
     <li>
         <a href="#">Finland</a>
     </li>
     <li>
         <a href="#">Russia</a>
     </li>
     <p>
         <a href="#">United Kingdom</a>
     </p>
     <li>
         <a href="#">Spain</a>
     </li>
     <li>
         <a href="#">Poland</a>
     </li>
 </ul>

采用父标签层级限制的话，一定要注意的是后面的空格，如果不加空格的话将看不到任何效果。这里得到的效果图如下：
在这里插入图片描述
也就是说ul标签下面的所有偶数位置的同类子标签（只是儿子，不包含儿子的儿子。。。）会被选取到。

综上所述：使用nth-of-type伪类选择器是最不容易出错的。

参考：
鑫旭大神的文章：https://www.zhangxinxu.com/wordpress/2011/06/css3选择器nth-child和nth-of-type之间的差异/

CSS伪类选择器nth-child 和nth-of-type

猜你喜欢