一次性分清nth-child(n)和nth-of-type(n)-CSDN博客

nth-child和nth-of-type都是子代选择器，他们的区别就是nth-child强制是父元素的第几个子元素，而nth-of-type要求是同中类型的第几个元素。

<body>
<span>首span</span>
         <p>第一个p</p>
         <p>第二个p
　　　　　　　　<span>插入的span</span>
　　　　　</p>
         <p>第三个p</p>
         <span>尾span</span>
</body>
p:nth-child(1){
         background-color: blue;
}

可以看到页面没有任何元素变色。原因是该选择器先找到p元素的父元素body，然后找父元素的第一个子元素，body的第一个子元素是span，但p:nth-child(1)要求的类型是p，所以没有符合条件的。

由于第一个p是body的第二个子元素，p:nth-child(2)就可以选中第一个p了。

修改代码：

span:nth-child(1){
   background-color: blue;
}

结果发现首span和插入的span背景颜色都发生了改变，原因是插入的span是第二个p中的第一个元素，也符合该选择器的条件。

告诉浏览器选择body下的span，body>span:nth-child(1)。结果只有首span发生了变色。

<body>
<span>首span</span>
         <p>第一个p</p>
         <p>第二个p
　　　　　　　　<span>插入的span</span>
　　　　　　</p>
         <p>第三个p</p>
         <span>尾span</span>
</body>
p:nth-of-type (1){
         background-color: blue;
}

结果第一个p背景颜色发生了改变，p:nth-of-type (1)会找到p元素的父元素body，然后找子元素中所有的p元素，排列后找到第一个p元素。

修个代码

span:nth-of-type(2){
   background-color: blue;
}

结果尾span发生了变色，插入的span没有变色，原因是排列的时候只是对同级的进行排列，插入的span是另一个级别中的第一个span，改变第二个p中的结构

<p>第二个p
　　<span>插入的span</span>
　　<span>插入的span2</span>
</p>

这样“插入的span2”就发生了变色。

在日常使用中，为了防止记混，推荐只用一个，推荐使用:nth-of-type。

转载于:https://www.cnblogs.com/mmxuehan/p/11155892.html