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()不起作用