真正理解nth-of-type，只知道nth-of-type和nth-child的區別？怕是不夠哦！

nth-of-type和nth-child的區別我這裏就不說了，只說nth-of-type。

首先咱們設定下面這樣一個結構，而後經過下面四個例子真正理解nth-of-type

1.<div>這是div</div>
2.<div class="common">這是div.common</div>
3.<p class="common">這是p.common</p>
4.<div class="common">這是div.common</div>
5.<p class="common">這是p.common</p>

1、經過div標籤選擇第2個div

div:nth-of-type(2) {
    background: red;
}

顯然這是符合咱們預期的，是廣大人民羣衆喜聞樂見的情形。

2、經過common類名選擇第3個.common

.common:nth-of-type(3) {
    background: red;
}

一樣也是符合咱們預期的——選中擁有common類名的第三個元素。
可能有些朋友看到這，嘴角已經微微上揚，露出輕蔑而天真的笑容，心想：標題取得咋咋呼呼，結果都是些嘗龜操做，不值一提不值一提~

好，那就來點不那麼嘗龜的！

3、經過common類名選擇第1個.common

.common:nth-of-type(1) {
    background: red;
}

是的，你沒有看錯，個人圖也沒錯，她確實選中了第2個.common，什麼緣由呢？這個例子暫時看不出來，咱們結合下面的第四個例子應該能看出些端倪。

4、經過common類名選擇第2個.common

.common:nth-of-type(2) {
    background: red;
}

有些朋友看到這更絕望了，明明括號裏只有2沒帶n，卻選中了2個！
剛剛露出天真笑容的朋友臉上的笑容凝固了，心想：nth-of-type變了，變得陌生了，再也不是我認識的那個單純的nth-of-type了。
可是朋友你不用垂頭喪氣，仔細觀察會發現：這兩個被選中的元素都是.common，可是他們的標籤名卻不一樣，並且剛好是各自標籤名的第二個！

由此咱們大膽推測：

nth-of-type以類名選擇元素時，會根據第一個擁有此類名的元素的標籤類型（假設爲div）來肯定候選元素的標籤（div），即便元素未擁有此類名，但只要是此標籤類型（div）就可成爲候選元素，而後根據序列號在候選元素中肯定一個元素，若是被肯定的這個元素也擁有此類名則此元素被選中，不然不選中任何元素；
另外，若擁有此類名的元素標籤類型不一樣，則將不一樣標籤分組，分別應用上述規則。

根據這個結論，再看3、四兩個例子，縈繞在咱們眼前的迷霧漸漸消散了。

有些朋友可能會猛然想起第二個例子一開始就是符合咱們原先的「想固然規則」的，但仔細對比會發現那只是個美麗的巧合，第二個例子仍然符合咱們的推論，進一步證實了推論的正確性。