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

比眉伴天荒 2022-05-26 01:58 102阅读 0赞

## CSS3选择器:nth-child和:nth-of-type之间的差异![Image 1][] ##

这篇文章发布于 2011年06月21日，星期二，23:04，归类于 [css相关][css]。 阅读 129753 次, 今日 49 次

by [zhangxinxu][] from [http://www.zhangxinxu.com][zhangxinxu]  
本文地址：[http://www.zhangxinxu.com/wordpress/?p=1709][http_www.zhangxinxu.com_wordpress_p_1709]

### 一、深呼吸，直接内容 ###

:nth-child和:nth-of-type都是CSS3中的伪类选择器，其作用近似却又不完全一样，对于不熟悉的人对其可能不是很区分，本文就将介绍两者的不同，以便于大家正确灵活使用这两类选择器。

先看一个简单的实例，首先是HTML部分：

然后两个选择器相对应的CSS代码如下：

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

上面这个例子中，这两个选择器所实现的效果是一致的，第二个`p`标签的文字变成了红色，如下截图（截自IE9）：  
![CSS3 :nth-child和:nth-of-type选择器差异第一个实例截图][CSS3 _nth-child_nth-of-type]

您可以狠狠地点击这里：[:nth-child测试demo1][nth-child_demo1] [:nth-of-type测试demo1][nth-of-type_demo1]

尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。

对于`:nth-child`选择器，在简单白话文中，意味着选择一个元素如果：

1.  这是个段落元素
2.  这是父标签的第二个孩子元素

对于`:nth-of-type`选择器，意味着选择一个元素如果：

1.  选择父标签的第二个段落子元素

`:nth-of-type`选择器，恩……怎么讲呢？限制条件少点~~

我们把上面的实例稍作修改，就可以看到这两个选择器之间的差异表现了，如下HTML代码：

<section>
        <div>我是一个普通的div标签</div>
        <p>我是第1个p标签</p>
        <p>我是第2个p标签</p>  
    </section>

还是与上面例子一致的CSS测试代码：

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

这时候两个选择器所渲染的结果就不一样了。

`p:nth-child(2)`悲剧了，其渲染的结果不是第二个`p`标签文字变红，而是第一个`p`标签，也就是父标签的第二个子元素。如下效果截图：  
![CSS3 :nth-child和:nth-of-type选择器差异实例页面截图][CSS3 _nth-child_nth-of-type 1]

您可以狠狠地点击这里：[:nth-child测试demo2][nth-child_demo2]

`p:nth-of-type(2)`的表现显得很坚挺，其把希望渲染的第二个`p`标签染红了，如下截图：  
![CSS3 :nth-child和:nth-of-type选择器差异实例页面截图 张鑫旭-鑫空间-鑫生活][CSS3 _nth-child_nth-of-type_ _-_-]

您可以狠狠地点击这里：[:nth-of-type测试demo2][nth-of-type_demo2]

对照上面两个选择器的语义，此处的效果表现差异不难理解。

对于`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`标签中的文字变红。

这两者的差异用一个跟切合实际的情况比喻就是计划生育查人口：前者是如果是第二胎，且是女孩，罚款！后者是管他第几胎，第二个出身的女孩，罚款！

### 二、二次深呼吸，个人体会 ###

老实讲，对于`:nth-child`和`:nth-of-type`这两个选择器自己用的并不多，对这两个选择器的认识就像是一团浆糊。印象在使用`:last-child`这个类似选择器的时候，出现了没有效果的情况，现在想想，就是因为对选择器的理解不够透彻，所以使用的时候出问题的。

今天对这两个选择器好好地过了遍之后，个人觉得`:nth-of-type`更彪悍些，不容易出问题，尽管`:nth-child`貌似更常见些。所以以后要选择某某元素下的第几个什么标签，建议使用`:nth-of-type`，因为页面元素插入其他标签啊什么的是比较常见的，如果使用`:nth-child`，选择器可能就是嗝屁。

不过嘛，世事无绝对，最靠谱的就是对这两个选择器彻彻底底地了解，具体情况具体使用。

另外一个小小的建议，为了避免出现“尼玛我的:nth-child变成打酱油的不顶鸟用啦！”这样的疑问，最好使用父标签层级限制，而不是当前标签类型限制。如下示例：

dl :nth-child(2) {  } /* 恩，这个要靠谱些 */
    dd:nth-child(2) {  } /* 这个还需要多多斟酌 */

当然，还是那句话，要看实际情况如何，没有一劳永逸，一方通行的代码。

目前各个浏览器对这两个选择器的支持还是挺让人欣慰的，Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+都是pass的。外带一提的是jQuery支持基本上大多的选择器，但是，其中并不包括这里的`:nth-of-type`，好像是因为这个选择器用的比较少。如果你想让jQuery也支持该选择器，可以使用jQuery选择器扩展插件，完美支持各个CSS3选择器，要查看此插件请轻轻地点击这里：[jQuery CSS3选择器扩展插件][jQuery CSS3]。

对了，同等类型的CSS3伪类选择器并不止这两个， `:first-of-type`, `:last-of-type`, `:nth-last-of-type` 以及 `:only-of-type`等，以后有机会的话会简单介绍这几个选择器的。

### 三、我的体会 ###

1.2n---n从1开始；2n+1---n从0开始；2n-1---n从1开始；

[Image 1]: http://qr.liantu.com/api.php?text=http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/
[css]: http://www.zhangxinxu.com/wordpress/category/css/
[zhangxinxu]: http://www.zhangxinxu.com/
[http_www.zhangxinxu.com_wordpress_p_1709]: http://www.zhangxinxu.com/wordpress/?p=1709
[CSS3 _nth-child_nth-of-type]: /images/20220526/25915e51a74849b19054ed41ff176bfb.png
[nth-child_demo1]: http://www.zhangxinxu.com/study/201106/css3-nth-child-test1.html
[nth-of-type_demo1]: http://www.zhangxinxu.com/study/201106/css3-nth-of-type-test1.html
[CSS3 _nth-child_nth-of-type 1]: /images/20220526/0bacc534ebbf4a4ba28bb1d840fe120f.png
[nth-child_demo2]: http://www.zhangxinxu.com/study/201106/css3-nth-child-test2.html
[CSS3 _nth-child_nth-of-type_ _-_-]: /images/20220526/e550c0a9eaf94e0884bbd0b82691436b.png
[nth-of-type_demo2]: http://www.zhangxinxu.com/study/201106/css3-nth-of-type-test2.html
[jQuery CSS3]: http://www.keithclark.co.uk/labs/jquery-extended-selectors/