首先要說明的一點是：css中的偽類選擇器還是少用為妙，複雜的css選擇器（層級關係較深，偽類等）的效能並不好，主要應該影響的還是瀏覽器渲染時候的迴流（reflow）和重繪（repain）的等的效能（個人理解）。

然後要講正題啦！

nth-of-type和nth-child這兩個選擇器是很容易混淆的兩個偽類選擇器, 功能都是用來選擇父元素的第幾個孩子。

1. nth-child
   假設有一個無序列表如下：

<ul>
    <li>
        <a href="#">United Kingdom</a>
    </li>
    <p>
        <a href="#">china</a>
    </p>
    <li>
        <a href="#">Germany</a>
    </li>
    <p>
        <a href="#">United Kingdom</a>
    </p>
    <li>
        <a href="#">Finland</a>
    </li>
    <li>
        <a href="#">Russia</a>
    </li>
    <li>
        <a href="#">Spain</a>
    </li>
    <li>
        <a href="#">Poland</a>
    </li>
</ul>
 

我們需要將它的偶數位置的li元素中a標籤內容的顏色設定成紅色

<style>
     li:nth-child(2n)>a {
         color: red;
     }
 </style>

效果圖如下：

這裡要注意的是nth-child(2n)中的n是從0開始的，而ul列表的第一個元素的index是1。因為 li:nth-child(2n)選擇的是父元素ul的第0,2,4,6,…個子元素（這裡不存在第0個元素，所以實際上是ul的第2,4,6,…位置的子元素），並且（著重注意），也就是隻能選擇上ul的偶數位置的li元素，那麼這個偶數位上如果是除li外的其他元素，是選擇不上的。因此這裡的第2個和第4個p元素並沒有被選上，這也是我們在實際開發中經常發現nth-child偽類選擇器失效的情況。

2. nth-of-type
   如果用nth-of-type來實現上面的功能，得到的效果是下面這樣的：
   
   我們可以發現，之前沒有被選上的第2個li元素在這裡被選上了。這是因為nth-of-type選擇的是父元素的第偶數個li元素，也就是無論中間有沒有其他的元素都不管，我們關心的僅僅是li元素在所有li元素中它排第幾，而不關心它是它父元素的第幾個子元素。

因此nth-child和nth-of-type的區別就一目瞭然了，nth-child相對來說更加嚴格，因此使用nth-of-type會規避掉一些選擇不上的問題。

還有一個需要注意的問題是：如果我們需要選擇父元素的第幾個同類元素，而不關心這個元素是什麼元素的話，可以進行父標籤層級的限制，而不是當前元素層級的限制。

ul :nth-of-type(2n)>a {
	color: red;
}

 <ul>
     <li>
         <a href="#">United Kingdom</a>
     </li>
     <p>
         <a href="#">china</a>
     </p>
     <li>
         <a href="#">Germany</a>
     </li>
     
     <p>
         <a href="#">United Kingdom</a>
     </p>
     <p>
         <a href="#">United Kingdom</a>
     </p>
     <li>
         <a href="#">Finland</a>
     </li>
     <li>
         <a href="#">Russia</a>
     </li>
     <p>
         <a href="#">United Kingdom</a>
     </p>
     <li>
         <a href="#">Spain</a>
     </li>
     <li>
         <a href="#">Poland</a>
     </li>
 </ul>

採用父標籤層級限制的話，一定要注意的是後面的空格，如果不加空格的話將看不到任何效果。這裡得到的效果圖如下：

也就是說ul標籤下面的所有偶數位置的同類子標籤（只是兒子，不包含兒子的兒子。。。）會被選取到。

綜上所述：使用nth-of-type偽類選擇器是最不容易出錯的。

參考：
鑫旭大神的文章：https://www.zhangxinxu.com/wordpress/2011/06/css3選擇器nth-child和nth-of-type之間的差異/