标签：级别 body div 防止 排列 日常 type back 告诉
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。
一次性分清nth-child(n)和nth-of-type(n)
标签：级别 body div 防止 排列 日常 type back 告诉
原文地址：https://www.cnblogs.com/mmxuehan/p/11155892.html
