一次性分清nth-child(n)和nth-of-type(n)
Posted mmxuehan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一次性分清nth-child(n)和nth-of-type(n)相关的知识，希望对你有一定的参考价值。
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)的主要内容，如果未能解决你的问题，请参考以下文章
说明E F:nth-child(n)和E F:nth-of-type(n)两种选择器