钟晓龙

今天小编跟大家讲解下有关CSS3中:nth-child和:nth-of-type的区别深入理解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3中:nth-child和:nth-of-type的区别深入理解 的相关资料，希望小伙伴们看了有所帮助。

关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3 才发现里面其实暗藏玄机。 :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)选择的是<li>one</li>节点 而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。

来源：爱蒂网