请知悉：本文最近一次更新为 10年 前，文中内容可能已经过时。
nth-child和:nth-of-type，这俩东东，我一直只知道nth-child……还真是丢人啊，最近装修首页，发现nth-child失灵了，奇怪了，仔细研究了下，发现竟然还有一个属性是nth-of-type。这回深入的研究了下这俩属性的差别，发现nth-child失灵正是因为他们俩的差别造成的。
以下部分摘自:https://www.jb51.net/css/142398.html
:nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？
其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以”type”来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
示例代码：
<div>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</div> 上面这个例子，.demo li:nth-child(2)选择的是
节点，而.demo li:nth-of-type(2)则选择的是
节点。
如您从本文得到了有价值的信息或帮助，请考虑扫描文末二维码捐赠和鼓励。
如本文对您有用，捐赠和留言 将是对我最好的支持~（捐赠可转为站内积分）
如愿意，请向朋友推荐本站，谢谢。
尊重他人劳动成果。转载请务必附上原文链接，我将感激不尽。
留言