今日前端小知识——伪类 :nth-child(n) 与 :nth-of-type(n) 的区别

伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。比如常见的锚点伪类 :link、:visited、:hover、:active 依次表示未选中状态、已访问状态、鼠标悬停状态、以及选中状态的链接。其中有两个伪类 :nth-child(n) 与 :nth-of-type(n) 都可以选择一组兄弟元素中的第几个元素（这组兄弟元素不一定要有上一级的父元素，可以只是一组同级元素）从概念上很容易混淆这两个伪类，但实际作用完全不一样，这里利用示例详细区分一下。

<p>p1</p>
<div>div1</div>
<p>p2</p>
<div>div2</div>
<p>p3</p>
<div>div3</div>
<p>p4</p>
<div>div4</div>

给 p 元素加个背景色，方便接下来区分。

p {
  background-color: coral;
}

:nth-child(n)

更改奇数位的 p 元素的背景颜色，看看效果如何。

p:nth-child(2n+1) {
  background-color: gold;
}

所有 p 元素的背景颜色都被更改了，由此可知，:nth-child(2n+1) 先将同组兄弟元素进行排序，接着选择奇数位的元素，若该元素是 p 元素则样式生效。

:nth-of-type(n)

p:nth-of-type(2n+1) {
  background-color: gold;
}

此时只有第一个和第三个 p 元素背景颜色被改变，其它 p 元素虽然在所有同组元素中处于奇数位，但在所有 p 元素中处于偶数位。由此可知，:nth-of-type(2n+1) 先将同组元素中的 p 元素进行排序，再对奇数位的 p 元素应用样式。

总结

综上可得，:nth-child() 先将所有同级元素排序，对指定位置上元素进行匹配，匹配成功则应用样式，重点在于目标元素在所有同级兄弟元素中的位置，可能出现即使存在目标元素但因为位置不匹配导致没有元素被匹配到的情况，比如上面的例子换成偶数位；而 :nth-of-type() 先将同级元素中所有的指定元素排序，再对指定位置上的元素应用样式，重点在于目标元素在所有同级指定元素中的位置，只要存在目标元素就至少有一个元素能被匹配到。