首先是二者的區別

:nth-child(n) 是選擇父元素的第n個子元素。
:nth-of-type(n) 是選擇父元素的第n個同類型的子元素

舉個例子：

  <div>
    <h1>title1</h1>
    <p>paragraph1</p>
    <p>paragraph2</p> <!-- 設為紅色 -->
  </div>

/* nth-child */
p:nth-child(3) {
    color: red;
}
/* nth-of-type */
p:nth-of-type(2)
 
 {
    color: red;
}

結果：

如果改為

p:nth-child(2) {
    color: red;
}

結果：

p:nth-child(2) 選擇的是第2個子元素，且是p元素。（先找第2個，再找是不是p）
p:nth-of-type(2) 則是選擇第2個為p的子元素。（先找p，再找第2個）

使用類名的時候（重點）

平時寫樣式的時候，直接使用標籤名還是比較少的，最多的還是類名。
.class:nth-child(n)還是一樣，選擇第n個子元素，且含有.class類名的元素。（雖然結果是這樣，但這個說法還是不準確的，其實就是一個交集選擇器，寫成:nth-child(n).class

但是.class:nth-of-type(n)是否也是選擇第n個同類名的元素呢？

我之前一直是這麼以為的，而且因為使用的時候沒出現過差錯，所以就想當然的認為是沒錯的。

所以，是的，這是不對的。

找了很多說明這兩個選擇的使用的介紹，但都沒有說過與類名結合起來的使用。這裡做一個踩坑的記錄。

先說結論吧：

.class:nth-of-type(n) 匹配的時候，是尋找到.class所在的標籤，然後匹配element:nth-of-type(n).class的
即先找到有.class類的標籤，然後匹配第n個該標籤的子元素，然後還要求匹配到的元素類名為class

舉個例子：

  <div>
    <h1>title1</h1>
    <p class="test">paragraph1</p>
    <p class="test2">paragraph2</p>
    <span class="test">span1</span>
    <span class="test test2">span2</span> <!-- 設為紅色 -->
  </div>

    .test:nth-of-type(2) {
      color: red;
    }

結果：

如果改成.test2:nth-of-type(2)呢？

第2個p.test2也成了紅色。

總結

要總結的話，應該是說:nth-child和:nth-of-type只會對標籤生效，加上類名只是普通的交集選擇器。就好像.a.b這樣的選擇器一樣，只不過.class:nth-of-type這樣的寫法容易引起誤會罷了。（我就深受其害啊，o(╥﹏╥)o）

補充猜想：

很可能所有的偽類選擇器，甚至還有偽元素選擇器都只對標籤生效。