&nbs p;
一、深呼吸，直接内容
:nth-child和:nth-of-type都是 CSS 3中的伪 类选择器 ，其作用近似却又不完全一样，对于不熟悉的人对其可能不是很区分，本文就将介绍两者的不同，以便于大家正确灵活使用这两类选择器。
先看一个 简单 的实例，首先是 HTML 部分：
<section> <p>我是第1个 p标签 </p> <p>我是第2个p标签</p> <!-- 希望这个变红 --> </section>
然后两个选择器相对应的CSS代码如下：
p:nth-child(2) { color: red ; }
p:nth-of -t y PE (2) { color: red; } 上面这个例子中，这两个选择器所实现的效果是一致的，第二个 p 标签的文字变成了 红色 ，如下截图（截自IE9）：
您可以狠狠地点击这里：:nth-child测试demo1 :nth-of-type测试demo1
尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。
对于 :nth-child 选择器，在简单白话文中，意味着选择一个元素如果：
这是个段落元素 这是父标签的第二个孩子元素对于 :nth-of-type 选择器，意味着选择一个元素如果：
选择父标签的第二个段落子元素:nth-of-type 选择器，恩……怎么讲呢？限制条件少点~~
我们把上面的实例稍作修改，就可以看到这两个选择器之间的差异表现了，如下HT ML 代码：
<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标签，第二个子元素）。如果在 @L_ 360 _2@ 标签后面再插入个 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+, Ch rom e 2+, Safari 3.1+, IE 9+都是pass的。外带一提的是 jQuery 支持基本上大多的选择器，但是，其中并不包括这里的 :nth-of-type ，好像是因为这个选择器用的比较少。如果你想让 jq uery也支持该选择器，可以使用jQuery选择器 扩展插件 ，完美支持各个CSS3选择器，要查看此插件请轻轻地点击这里：jQuery CSS3选择器扩展插件。
对了，同等类型的CSS3 伪类 选择器并不止这两个， : First -of-type , :last-of-type , :nth-last-of-type 以及 :only-of-type 等，以后有 机会 的话会简单介绍这几个选择器的。
三、最后的深呼吸，吐气，淡然的结语
我之前写过一篇颇有争议的 文章 ：精简高效的CSS命名准则/方法。根据里面的观点，像 :nth-child 和 :nth-of-type 这类选择器 应该 少用为妙，一是性能，二是本身限制了内容的重用性。
但是，还是那句话，凡事无绝对。有时候因为设计的特殊性，我们可能需要有可以方便控制某些特殊元素的方法，例如浮动列表边缘处的列表不能有 m arg in 值以实现两端对齐效果，等。此时CSS3选择器是权衡下来的最优解决 方案 。因此，熟悉与理解CSS3中的各个选择器还是有必要的。
随着IE6~8浏览器缓慢地日落，CSS3的时代可能就会在不知不觉中到来， 面对 这必然的趋势，我们是时候做好准备了。
感谢阅读，欢迎纠错。
参考文章：The Difference Between :nth-child and :nth-of-type
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS3选择器:nth-child和:nth-of-type之间的差异 全部内容，希望文章能够帮你解决 html5教程-CSS3选择器:nth-child和:nth-of-type之间的差异 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS3选择器:nth-child和:nth-of-type之间的差异的详细内容...