:nth-of-type 和 :nth-child 伪类别再傻傻分不清

大家好，我是前端西瓜哥。今天我们来学习一对长得很像的两兄弟 :nth-of-type 和 :nth-child。

:nth-child

首先根据 :nth-chilid 前的样式规则，找到所有匹配元素的所有兄弟元素。然后我们从中找出 符合位置规则 的元素，并且这些元素也 符合样式规则，就应用样式。

这个位置规则其实是一个 an + b 的表达式。其中 a 和 b 表示一个类型为整数的常数，如果值为 0，可以省略不写。n 是一个变量，为从 0 开始的递增整数集合。

这里我们给几个表达式例子：

• nth-child(2n+1)：匹配位置为奇数（即 1、3、5、7...）的元素。因为比较常用，比如表格的斑马线效果，所以我们可以用语义更好的关键字 odd 来替代 2n+1。需要特别注意的是，元素的索引是从 1 开始的，不是从 0 开始的。
• nth-child(2n)：匹配位置为偶数（即 2、4、6、8...）的元素。同 nth-child(even)。
• nth-child(-n+3)：匹配前三个元素。
• nth-child(1)：匹配首元素，同 :first-child。

下面我们看一个具体的例子。

HTML 和 CSS 如下：

<style>
  div.item:nth-child(2n+1) {
    border: 1px solid salmon;
  }
</style>
<div>
  <div>div1</div>
  <div class="item">div2 .item</div>
  <div class="item">div3 .item</div>
  <div class="item">div4 .item</div>
  <div>div5</div>
</div>

渲染结果如下：

首先我们通过 div.item 找到 div2 这个元素，然后我们通过 2n+1 找到需要应用样式的兄弟元素。

符合规则 2n+1 有 div1、div3、div5，然后我们从中找出符合 .item 的，也就是 div3.item，给它应用样式。

:nth-of-type

:nth-of-type 和 :nth-child 非常像，也是通过在兄弟元素中找出符合 an+b 表达式的元素，给它们应用样式。

但有一点不同，就是元素的索引位置是从样式匹配的兄弟元素从上到下排序的。

我们看一个具体的例子。

HTML 和 CSS 如下：

<style>
  div.item:nth-of-type(2n+1) {
    border: 1px solid salmon;
  }
</style>
<div>
  <p>p1</p>
  <div class="item">div1 .item</div>
  <div class="item">div2 .item</div>
  <p>p2</p>
  <div class="item">div3 .item</div>
</div>

渲染结果如下：

我们通过 div.item 匹配到 div1 元素，然后找出它的兄弟元素中所有匹配 div.item 的元素，给它们按顺序标上 1、2、3、4... 索引值。最后从里面挑选索引符合 2n+1 表达式，也就是奇数位置的元素。

总结

简单来说，:nth-child 是先圈定所有兄弟元素，给它们顺序标上索引，然后从中找到既符合表达式也符合 div.item 的元素。而 :nth-of-type 是先圈定符合 div.item 的所有元素给它们标上索引，从中找出符合表达式的元素。

本文首发于公众号：前端西瓜哥