在使用nth-child和nth-of-type的時候，你會不會搞混呢？我們來簡單的看下他們怎么使用，以及對應的差異。
先看用法
得先知道用法，才能去比較他們的差異。
nth-child
先來看看nth-child的用法。
- 選擇第五個元素
li:nth-child(5) {
color: green;
}
要選擇第一個元素，可以使用:first-child，其實我打賭你也可以修改上面的元素來實現這一點。
- 選擇除前五個之外的所有
li:nth-child(n+6) {
color: green;
}
如果這里有超過10個元素，它將選擇5個后面的所有元素。
- 選擇前五個元素
li:nth-child(-n+5) {
color: green;
}
- 每四個一組，選擇第一個
li:nth-child(4n-7) { /* 或者 4n+1 */
color: green;
}
-
選擇奇數或者偶數
-
奇數
imgli:nth-child(odd) { color: green; } -
偶數
?imgli:nth-child(even) { color: green; }
-
- 選擇最后一個元素
li:last-child {
color: green;
}
這里顯示第十個，因為我們這里只有十個元素。如果有八個元素，那么小綠球就是第八個。...
- 選擇倒數第二個元素
li:nth-last-child(2) {
color: green;
}
選擇第9個因為我們這里有10個元素，但是如果有30個元素則會選擇第29個元素。
動手試試？
nth-of-type
:nth-of-type允許根據公式根據源順序選擇一個或多個元素。在CSS選擇器第3級規范中，它被定義為“結構偽類”，這意味著它用于根據與父元素和兄弟元素的關系對內容進行樣式化。
假設我們有一個無序列表，并希望“斑馬條紋”交替列表項：
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
</ul>
不用為每個列表都添加類(.even & .odd也不用)，我們可以使用:nth-of-type：
li {
background: slategrey;
}
/* 從第二個項開始選擇交替項 */
li:nth-of-type(2n) {
background: lightslategrey;
}
如你所見，:nth-of-type接受一個參數：這個參數可以是單個整數、關鍵字even或odd，也可以是如上所示的公式。如果指定一個整數，則只選擇一個元素——但如果是關鍵字或公式將遍歷 父元素的所有子元素 并選擇匹配的元素——類似于在JavaScript中導航數組中的項。關鍵詞even和odd很直截了當，但公式是使用語法a + b構造的，其中：
- "a"是一個整數
- "n"是一個字母
- "+"是一個運算符，可能是
+或- - "b"是一個整數，如果公式中包含運算符，則需要使用"b"
需要注意的是，這個公式是一個方程，遍歷每個同級元素，確定要選擇哪個。如果包含公式的"n"“部分，則表示一組遞增的正整數(就像遍歷數組一樣)。在上面的例子中，我們用公式2n來選擇每第二個元素，這是可行的，因為每次選中一個元素，"n"就會增加1(2×0,2×1,2×2,2×3，等等)。如果一個元素的順序與方程的結果匹配，那么它將被選中(2,4,6，等等)。要更深入地解釋所涉及的數學，請閱讀本文。
為了進一步說明，這里有一些不錯的:nth-of-type選擇器的例子：
感興趣的點(需要記住哦)
-
:nth-of-type從源順序的頂部開始遍歷元素。它與:nth-last-of-type之間的唯一區別是后者迭代從源順序底部開始的元素。 -
:nth-of-type選擇器非常類似于:nth-child但有一個 關鍵區別 ：它更具體。在上面的例子中，它們會產生相同的結果，因為我們只遍歷li元素，但是如果我們遍歷更復雜的兄弟姐妹組，:nth-child會嘗試匹配所有的兄弟姐妹，而不僅僅是相同元素類型的兄弟姐妹。這就說明了:nth-of-type的強大功能，它針對的是與類似的兄弟姐妹(而不是所有的兄弟姐妹)的關系順序中的特定類型的元素。
相關的屬性
其他的資源
來看看區別
假設有那么一個HTML：
<section>
<p>Little</p>
<p>Piggy</p> <!-- Want this one -->
</section>
我們來做一些完全相同的事情：
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
你看到的是相同，但是他們當然有一點不同。
我們的 :nth-child 選擇器，在"Plain English"中表示在以下情況下選擇一個元素：
- 這是一個段落元素
- 這是父級的第二個child
我們的 :nth-of-type 選擇器，在"Plain English"中表示：
- 選擇父元素的第二段子元素
:nth-of-type是……怎么說才好呢?更少的條件。
假設我們改成下面這樣：
<section>
<h1>Words</h1>
<p>Little</p>
<p>Piggy</p> <!-- 想要匹配這個 -->
</section>
這就破壞了：
p:nth-child(2) { color: red; } /* 現在就不對了 */
但是下面這個這仍然有效：
p:nth-of-type(2) { color: red; } /* 仍然可以 */
至于上面的"破壞"，我的意思是：上面的:nth-child選擇器現在選擇的是單詞"Little"而不是"Piggy"，因為該元素滿足了條件：1: 它是第二個孩子，2: 它是一個段落元素。至于上面說的"仍然可以"，就是說"Piggy"還是被選中的，因為他是該父元素下的第二個段落(p)。
如果想在h1后面添加h2，:nth-child選擇器不會選擇任何東西，因為現在第二個子節點不再是一個段落，所以選擇器什么也找不到。:nth-of-type可以繼續工作。
我認為:nth-of-type一般更健壯，也更有用，盡管:nth-child更常見。
瀏覽器對于:nth-of-type也挺不錯，Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+。
不要忘記其他的方法：:first-of-type，:last-of-type，:nth-last-of-type和:only-of-type。在這里了解更多。
