标签:
<section>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
p
标签的文字变成了红色,如下截图(截自IE9)::nth-child
选择器,在简单白话文中,意味着选择一个元素如果::nth-of-type
选择器,意味着选择一个元素如果::nth-of-type
选择器,恩……怎么讲呢?限制条件少点~~<section>
<div>我是一个普通的div标签</div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
p:nth-child(2)
悲剧了,其渲染的结果不是第二个p
标签文字变红,而是第一个p
标签,也就是父标签的第二个子元素。如下效果截图:p:nth-of-type(2)
的表现显得很坚挺,其把希望渲染的第二个p
标签染红了,如下截图:p:nth-child(2)
表示这个元素要是p
标签,且是第二个子元素,是两个必须满足的条件。于是,就是第一个p
标签颜色为红色(正好符合:p标签,第二个子元素)。如果在div
标签后面再插入个span
标签,如下:<section>
<div>我是一个普通的div标签</div>
<span>我是一个普通的span标签</span>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
p:nth-child(2)
将不会选择任何元素。p:nth-of-type(2)
表示父标签下的第二个p
元素,显然,无论在div
标签后面再插入个span
标签,还是h1
标签,都是第二个p
标签中的文字变红。:last-child
这个类似选择器的时候,出现了没有效果的情况,现在想想,就是因为对选择器的理解不够透彻,所以使用的时候出问题的。:nth-of-type
更彪悍些,不容易出问题,尽管:nth-child
貌似更常见些。所以以后要选择某某元素下的第几个什么标签,建议使用:nth-of-type
,因为页面元素插入其他标签啊什么的是比较常见的,如果使用:nth-child
,选择器可能就是嗝屁。dl :nth-child(2) { } /* 恩,这个要靠谱些 */
dd:nth-child(2) { } /* 这个还需要多多斟酌 */
:nth-of-type
,好像是因为这个选择器用的比较少。如果你想让jQuery也支持该选择器,可以使用jQuery选择器扩展插件,完美支持各个CSS3选择器,要查看此插件请轻轻地点击这里:jQuery CSS3选择器扩展插件。:first-of-type
, :last-of-type
, :nth-last-of-type
以及 :only-of-type
等,以后有机会的话会简单介绍这几个选择器的。:nth-child
和:nth-of-type
这类选择器应该少用为妙,一是性能,二是本身限制了内容的重用性。如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
css3 nth-child 与 nth-of-type 的区别
标签:
原文地址:http://www.cnblogs.com/liuna/p/5379330.html