关于 nth-of-type 伪类的使用误区

在修复一个关于样式的缺陷时，发现是由于使用 nth-of-type 不当引起的。

MDN文档上的定义如下：

The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).

即此伪类匹配兄弟节点之间类型相同的元素，括号里还特意解释了这里”类型相同“指的是标签名称。

所以说 nth-of-type 并不是 nth-of-class，不能通过类名去匹配。但是如果使用了类名会发生什么呢？看一下下面的代码：

.no-padding-right:nth-of-type(odd) {
  color: red;
}
.no-padding-right:nth-of-type(even) {
  color: green;
}

<div class="no-padding-right">内容1</div>
<div>内容2</div>
<div class="no-padding-right">内容3</div>
<div class="no-padding-right">内容4</div>
<div class="no-padding-right">内容5</div>
<div class="no-padding-right">内容6</div>

在上述代码中，原本的目的是想根据 .no-padding-right 来计算奇偶，也就是说想忽略掉没有 .no-padding-right 类的 div元素,让“内容3”所在的 div 变成偶数行，从而使其文字的颜色变成绿色。

上面一开始就说了这样肯定是不行的，那么看一下效果吧

可以看到选择器还是把第三行当成了奇数行。匹配的过程如下：

1. 先根据类名去找到其所在的元素标签名，比如 .no-padding-right 所在的元素标签名是 div
2. 那么再利用 nth-of-type() 来计算奇偶的时候，其实还是根据标签名 div 来算的，并不是根据类名
3. 第二行虽然不符合 .no-padding-right 匹配条件，但是不影响计算奇偶，所以第三行依旧是奇数，且符合匹配条件

需要注意下此选择器的用法，希望以后能出一个 nth-of-class 选择器！