nth-child与nth-of-type的区别

Posted 2020-09-20 未知账户

: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标签中的文字变红。