《
CSS实例教程： nth-child和 nth-type-of的区别》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333332013.htm
假设有以下 HTML 代码：
--> [
网站建设之]CSS实例教程：:nth-child和:nth-type-of的差别
1. 是一个段落元素 p
2. 是父元素的第二个子元素
:nth-of-type 选择符 从词义上来看，表示：
Tag：区别 教程 实例 区别 教程 实例
p:nth-child(2){color:red;}
p:nth-of-type(2){color:red;}成果固然雷同，但是两者自身还是有所区别的。
这里有一个 Lea Verou 做的可视化示例。
p:nth-of-type(2){color:red;}所谓的“破&rdquo,CSS实例教程 制作网页特殊产品列表;，意思是上面的 :nth-child 选择符当初选到的是 “Little”，而不是 “Piggy&rdquo,CSS实例教程 分号引起页面混乱;，因为这个元素知足以下所有条件：
<section>
<h1>,CSS实例 网页背景渐变;World</h1>
,CSS实例 网页布局中的图文列表; <p>,CSS实例 定位(position)页面定位详解;Little</p>
<p>Piggy</p> <!--目的元素-->
</section>那么，这种方法就“破”了：
我发明当我埋怨“为什么 :nth-child 选择符不行？”时，相对多数的情形是因为在选择符前限定了标签，而那个地位的子元素不是那个标签。因而在使用 :nth-child 时，我感到最好还是只指定父元素并且不要用标签来限度 :nth-child 。
假设构造变更如下：
相干：不要忘了它这些了不起姊妹们 :first-of-type :last-of-type :nth-last-of-type 跟 :only-of-type 。更多请看这里。
原文：The Difference Between :nth-child and :nth-of-type
抉择满意以下前提的元素：
1) 它是第二个字元素
2）它是一个段落元素 p
所说的“能用”，意思是 “Piggy” 仍旧被选中，因为它是它父元素下的第二个段落元素 p 。
假如在 h1 之后增添一个 h2，那么 :nth-child 取舍符就什么也选中不了了，由于那时第二个子元素就不再是段落元素 p 了。但是 :nth-of-type 依然还是有效的。
p:nth-child(2){color:red;}然而，这个仍是”能用”的：
阅读器对 :nth-of-type 的支持是相称不错的…Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3,CSS定义的下拉菜单代码.1+, IE 9+。如果须要更多的支持，jQuery 应当会挺你的（使用选择符，增加一个类名,CSS学习教程 学习CSS的宽度width，使用类名来增添款式 $(“selector:nth-child(xxxxx)”).addClass(“someClass”)），但是实际上 jQuery 却废弃了对 :nth-of-type 的支撑，这很奇异啊，据说是因为 :nth-of-type 的应用率很低。有个插件能够使得 jQuery 支持它。
<section>
<p>Little<,CSS字体：详解font属性;/p>
<p>Piggy</p> <!--目标元素-->
</section>以下代码得到的后果一样：
:nth-child 挑选符 从词义上来说，表现，
我感到 :nth-of-type 绝对不那么懦弱，而且总的来说更加有用，只管 :nth-child 更加常见（作者个人意见）。你有多少时候在想“我想选择父元素的第二个子元素，如果它凑巧是个段落元素 p” 这事呢？可能有那么几回，但是更多的可能是你想“选中第二个段落”或者“每隔两行选择一行 (select every third table row)”，也就是说 :nth-of-type 是更加好的一个选择（再次申明，作者个人看法）。
dl :nth-child(2) {} /* 推举 */
dd:nth-child(2) {} /* 不是很好 */当然,css字体设置(不同浏览器设置效果)，详细情况还得详细剖析。（我咋这么不爱好这句话呢 – 糖伴西红柿）
1. 选择父元素的第二个段落元素 p
:nth-of-type 是… 怎么说好呢,CSS如何自定义滚动条样式，哈~ … 较少条件要约的。
译文：:nth-child 和 :nth-type-of 的区别
(责任编辑：网站建设)
CSS实例教程： nth-child和 nth-type-of的区别相关文章