CSS3选择器:nth-child和:nth-of-type之间的差异奇数偶数奇偶奇元素偶元数有大用

星期一, 2014-06-09 13:28 — shiping1

#mingxitable tr.zixun0:nth-of-type(2),#mingxitable tr.zixun0:nth-of-type(4),

#mingxitable tr.zixun1:nth-of-type(2),#mingxitable tr.zixun1:nth-of-type(4)

{

background: rgb(255, 221, 155);

}

上面标签名.类名:nth-of-type 的用法是不对的 只能用增加新的class的方法来解决

下面有大用

Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).

Here, we specify two different background colors for odd and even p elements:

p:nth-of-type(odd) {
background: #ff0000;
}

p:nth-of-type(even) {
background: #0000ff;
}

p:nth-of-type(2n+1) { text-align: left; }
p:nth-of-type(2n) { text-align: right; }

li {

background: slategrey;

}

/* select alternating items starting with the second item */

li:nth-of-type(2n) {

background: lightslategrey;

}

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

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

一、深呼吸，直接内容

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

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

<section>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

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

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

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

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

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

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

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

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

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

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

: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选择器差异实例页面截图

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

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

您可以狠狠地点击这里：: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选择器扩展插件。

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