css中nth-child和:nth-type-of的区别

原创
2015/05/20 09:15
阅读数 36

最近没什么工作,研究一下css3还是值得的

关于css中nth-child和:nth-type-of的使用貌似好像两个对于同一个功能实现起来差不多,查了一下书,还是有一定用法上的区别:

:nth-child可以选择父元素下的字元素,:nth-of-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>节点。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部