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>节点。

以上就是CSS3中:nth-child和:nth-of-type的区别深入理解。不完美又何妨,万物皆有裂隙,那是光进来的地方。更多关于CSS3中:nth-child和:nth-of-type的区别深入理解请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
详解CSS nth-child与nth-of-type的元素查找方式

详解CSS3选择器:nth-child和:nth-of-type之间的差异

详解CSS3中nth-child与nth-of-type的区别

css :nth-child与:nth-of-type之小解

type=file的inpu美化,自定义上传按钮样式代码