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):

您可以狠狠地点击这里::nth-child测试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标签,也就是父标签的第二个子元素。如下效果截图:

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

p:nth-of-type(2)的表现显得很坚挺,其把希望渲染的第二个p标签染红了,如下截图:

您可以狠狠地点击这里::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 以及 :only-of-type等,以后有机会的话会简单介绍这几个选择器的。

三、最后的深呼吸,吐气,淡然的结语

我之前写过一篇颇有争议的文章:精简高效的CSS命名准则/方法。根据里面的观点,像:nth-child:nth-of-type这类选择器应该少用为妙,一是性能,二是本身限制了内容的重用性。

但是,还是那句话,凡事无绝对。有时候因为设计的特殊性,我们可能需要有可以方便控制某些特殊元素的方法,例如浮动列表边缘处的列表不能有margin值以实现两端对齐效果,等。此时CSS3选择器是权衡下来的最优解决方案。因此,熟悉与理解CSS3中的各个选择器还是有必要的。

随着IE6~8浏览器缓慢地日落,CSS3的时代可能就会在不知不觉中到来,面对这必然的趋势,我们是时候做好准备了。

感谢阅读,欢迎纠错。

参考文章:The Difference Between :nth-child and :nth-of-type

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1709

[css3]CSS3选择器:nth-child和:nth-of-type之间的差异的更多相关文章

  1. css3: css3选择器

    --------------------css3选择器-------------------------css3属性选择器  ~~属性选择器基本上ie7+都支持,可以相对放心的使用 见: www.ca ...

  2. CSS3 教程 选择器 标记一下防止 要找时404

    客 » Airen的博客 CSS3 选择器——基本选择器 作者:大漠 日期:2011-08-09 点击:6418  CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运 ...

  3. CSS系列:CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  4. CSS3常用选择器(三)

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  5. CSS3 ::selection选择器

    一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...

  6. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  7. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  8. CSS3之选择器

    总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器 选择器 举例 例子描述 element1~element2 p~a 选择前面有 < ...

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

    CSS3选择器:nth-child和:nth-of-type之间的差异 这篇文章发布于 2011年06月21日,星期二,23:04,归类于 css相关. 阅读 57546 次, 今日 143 次 by ...

随机推荐

  1. 遍历echsop的region表形成缓存的程序

    header("Content-type: text/html; charset=utf-8"); $con = mysql_connect("localhost&quo ...

  2. zepto源码--核心方法3(属性相关)--学习笔记

    继续$.fn方法 今天主要介绍几个跟属性操作相关的方法attr, removeAttr, prop, data attr 读取或设置dom的属性.如果没有给定value参数,则读取对象集合中第一个元素 ...

  3. LeetCode Shortest Distance from All Buildings

    原题链接在这里:https://leetcode.com/problems/shortest-distance-from-all-buildings/ 题目: You want to build a ...

  4. alibaba的FastJson(高性能JSON开发包),fastjson 使用demo

    这是关于FastJson的一个使用Demo,在Java环境下验证的 class User{ private int id; private String name; public int getId( ...

  5. 求文件的m至n行

    #!/usr/bin/env python def read_file(file_name,start,stop): start_line = 0 try: with open(file_name) ...

  6. RDIFramework.NET ━ 9.10 岗位(职位)管理 ━ Web部分

    RDIFramework.NET ━ .NET快速信息化系统开发框架 9.10  岗位(职位)管理 -Web部分 岗位(职位)管理模块主要是针对组织机构的岗位(职位)进行管理,包括:增加.修改.删除. ...

  7. ZoomBar 设计

    package com.example.canvasdemo; import android.content.Context; import android.graphics.Canvas; impo ...

  8. 大数的乘法(C++)

    题目:POJ 2398 Bull Math Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13410   Accepted: ...

  9. elasticsearch基础

    elastic使用lucene建立索引的步骤中,需要文件系统缓存需要同步到磁盘上.(多个segment->commit文件来维护) 当建立历史数据时,并不要求太高的实时性时,可以减小(默认1s) ...

  10. asp.net 验证正则表达式

    基本元字符: . 任意的一个非换行字符 [] 集合匹配,匹配一个[]中出现的字符. 是在多个字符中取一个. () 调整优先级的作用. 还有一个分组的作用 | 或的意思,测试|一下. 注意,或的优先级最 ...