讓我們看下面一段html：

<section>
<p>Little</p>
<p>Piggy</p> <!– 定位此元素–>
</section>

下面的2種寫法都可以達到目的

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

但兩者是存在差異的
:nth-child 選擇器，在此例子中意思就是指
1.首先是個p元素
2.其次這個p元素是其父元素的第二個孩子
:nth-of-type 選擇器，在此例子中意思就是指
1.定位一個父元素下的第二個p元素
:nth-of-type 可能更符合我們日常的思維方式
讓我們改變下html：

<section>
<h1>Words</h1>
<p>Little</p>
<p>Piggy</p> <!– 定位此元素 –>
</section>

同樣用之前的2種方法:

p:nth-child(2) { color: red; } /* 無法正確定位 */
p:nth-of-type(2) { color: red; } /* 依然有效 */

按照之前的解釋簡單分析下：
:nth-child 選擇器
首先是個p元素，沒有問題，但是其父元素的第二個孩子是<p>Little</p>，所以沒有正確定位
:nth-of-type 選擇器
父元素下的第二個p元素，正是我們想要的結果
再進一步，如果我在 h1之后加入一個h2,在這個例子中:nth-child選擇器則無法定位任何元素，因為父元素的第二個元素是 h2，而不是p元素。相對的， :nth-of-type依然有效。
我個人覺得:nth-of-type更健壯些，盡管:nth-child貌似用的更多些。 而且大部分時候，我們的想法都可能會是“定位一個父元素下的第二個p元素”， 而不是“定位一個父元素下的第二個元素，如果它是個p元素的話”。
我遇到的大多數“我自問:為什么這個:nth-child選擇器不起作用”的時候,基本都是 因為我給:nth-child選擇器前置了一個標簽，但是那個孩子節點并不是那個標簽。 所以當我用:nth-child的時候，我覺得最好只指定父元素，:nth-child不要前置子元素標簽。
像下面這樣：

dl :nth-child(2) {} / * 這樣更好些 * /
dd:nth-child(2) {} / * 比這個 * /

當然，一切視具體情況而定。
目前Safari3.1+，IE9+，ff3.5+，Opera9.5+，Chrome2+ 都支持:nth-of-type選擇器。 如果你希望在較舊的瀏覽器中支持，可以考慮jQuery。 值得注意的是jQuery中:nth-child是按照標準來實現的，是從1開始計數，而jquery中得 :eq是從0開始。

當然，一切視具體情況而定。

目前Safari3.1+，IE9+，ff3.5+，Opera9.5+，Chrome2+ 都支持:nth-of-type選擇器。 如果你希望在較舊的瀏覽器中支持，可以考慮jQuery。 值得注意的是jQuery中:nth-child是按照標準來實現的，是從1開始計數，而jquery中得 :eq是從0開始。

這里還有個測試頁面, 可以幫助你更好地理解。