CSS实例教程：:nth-child和:nth-type-of的区别

原文：The Difference Between :nth-child and :nth-of-type

译文：:nth-child 和 :nth-type-of 的区别

假设有以下 HTML 代码：

<section>
     <p>Little</p>
     <p>Piggy</p>  <!--目标元素-->
</section>

以下代码得到的效果一样：

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

结果虽然相同，但是两者本身还是有所区别的。

:nth-child 选择符 从词义上来说，表示，

选择满足以下条件的元素：

• 1. 是一个段落元素 p
• 2. 是父元素的第二个子元素

:nth-of-type 选择符 从词义上来看，表示：

• 1. 选择父元素的第二个段落元素 p

:nth-of-type 是… 怎么说好呢，哈~ … 较少条件要约的。

假设结构变化如下：

<section>
     <h1>World</h1>
     <p>Little</p>
     <p>Piggy</p>  <!--目标元素-->
</section>

那么，这种方式就“破”了：

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

但是，这个还是”能用”的：

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

所谓的“破”，意思是上面的 :nth-child 选择符现在选到的是 “Little”，而不是 “Piggy”，因为这个元素满足以下所有条件：

• 1) 它是第二个字元素
• 2）它是一个段落元素 p

所说的“能用”，意思是 “Piggy” 仍然被选中，因为它是它父元素下的第二个段落元素 p 。

如果在 h1 之后增加一个 h2，那么 :nth-child 选择符就什么也选中不了了，因为那时第二个子元素就不再是段落元素 p 了。但是 :nth-of-type 仍然还是有效的。

我感觉 :nth-of-type 相对不那么脆弱，而且总的来说更加有用，尽管 :nth-child 更加常见（作者个人意见）。你有多少时候在想“我想选择父元素的第二个子元素，如果它恰巧是个段落元素 p” 这事呢？可能有那么几次，但是更多的可能是你想“选中第二个段落”或者“每隔两行选择一行 (select every third table row)”，也就是说 :nth-of-type 是更加好的一个选择（再次声明，作者个人意见）。

我发现当我抱怨“为什么 :nth-child 选择符不行？”时，绝对多数的情况是因为在选择符前限定了标签，而那个位置的子元素不是那个标签。因此在使用 :nth-child 时，我觉得最好还是只指定父元素并且不要用标签来限制

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!