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>

一、通過div標籤選擇第2個div

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

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

二、通過common類名選擇第3個.common

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

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

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

三、通過common類名選擇第1個.common

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

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

四、通過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）就可成為候選元素，然後根據序列號在候選元素中確定一個元素，如果被確定的這個元素也擁有此類名則此元素被選中，否則不選中任何元素；
另外，若擁有此類名的元素標籤類型不同，則將不同標籤分組，分別應用上述規則。

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

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