css :nth-of-type选择器为什么不起作用！！！

问题

今天工作才发现的，原来我一直就理解错了！！

MDN官网对这个选择器的的定义是：

:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

/* 在每组兄弟元素中选择第四个

元素 */

p:nth-of-type(4n) {

color: lime;

}

重点来了！！！他说明的是标签，针对的只是标签，因此，比如网上关于这个问题的代码：

// html
<h1>123</h1>
<p>123</p>
<h1 class="test">123</h1>
<h1 class="test">123</h1>

// style
.test:nth-of-type(1) {
background: pink;
}

是起不来任何作用的！！！因为该选择器本质上只选择兄弟节点的标签 h1，不是选择的标签+类 h1+test，因此选择的是同级的三个 h1 标签，因此要正确选择第一个带有 test 类的 h1 标签，就应该是：

// style 选择 h1 标签第二个
.test:nth-of-type(2) {
background: pink;
}

本质上这个例子和直接书写成 h1 标签是没有任何区别的，只是说类选择器能够让我们选择特定的级别标签，而不是选择整个html代码中的h1标签。

h1:nth-of-type(2) {
background: pink;
}

总结

通过这个例子更加加深了我对css选择器的理解。目前css2和css3css类似的选择器确实只支持元素标签，不支持类名ID，据了解css4会增加一个ntn-match()，会支持上述的类名ID选择兄弟节点的功能。

参考

MDN：nth-of-type

:nth-of-type()不起作用