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選擇兄弟節點的功能。