(转载)CSS3中:nth-child和:nth-of-type的区别深入理解

:nth-child 可以选择父元素下的字元素,:nth-of-type 也可以。但是它们到底有什么区别呢?

其实区别很简单::nth-of-type 为什么要叫 :nth-of-type?因为它是以”type“来区分的。也就是说:ele:nth-of-type(n)是指父元素下第 nele 元素,

ele:nth-child(n) 是指父元素下第 n 个元素且这个元素为 ele,若不是,则选择失败。

eg:

1
2
3
4
5
6
7
<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> 节点。

---- 本文结束,感谢您的阅读 ----