by from 本文地址：
一、深呼吸，直接内容
:nth-child和:nth-of-type都是CSS3中的伪类选择器，其作用近似却又不完全一样，对于不熟悉的人对其可能不是很区分，本文就将介绍两者的不同，以便于大家正确灵活使用这两类选择器。
先看一个简单的实例，首先是HTML部分：
我是第1个p标签
我是第2个p标签
然后两个选择器相对应的CSS代码如下：
p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色，如下截图（截自IE9）：
您可以狠狠地点击这里：
尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。
对于:nth-child选择器，在简单白话文中，意味着选择一个元素如果：
-
这是个段落元素
-
这是父标签的第二个孩子元素
对于:nth-of-type选择器，意味着选择一个元素如果：
-
选择父标签的第二个段落子元素
:nth-of-type选择器，恩……怎么讲呢？限制条件少点~~
我们把上面的实例稍作修改，就可以看到这两个选择器之间的差异表现了，如下HTML代码：
我是第1个p标签
我是第2个p标签
还是与上面例子一致的CSS测试代码：
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标签，如下：
我是第1个p标签
我是第2个p标签
那么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) { } /* 这个还需要多多斟酌 */