一、深呼吸，直接內容

:nth-child和:nth-of-type都是CSS3中的偽類選擇器，其作用近似卻又不完全一樣，對于不熟悉的人對其可能不是很區分，本文就將介紹兩者的不同，以便于大家正確靈活使用這兩類選擇器。

先看一個簡單的實例，首先是HTML部分：

<section><p>我是第1個p標簽</p><p>我是第2個p標簽</p> <!-- 希望這個變紅 --> </section>

然后兩個選擇器相對應的CSS代碼如下：

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

上面這個例子中，這兩個選擇器所實現的效果是一致的，第二個p標簽的文字變成了紅色，如下截圖（截自IE9）：

您可以狠狠地點擊這里：:nth-child測試demo1?:nth-of-type測試demo1

盡管上面兩個demo的最后效果一致，但是兩個選擇器之間存在差異是必然的。

對于:nth-child選擇器，在簡單白話文中，意味著選擇一個元素如果：

這是個段落元素

這是父標簽的第二個孩子元素

對于:nth-of-type選擇器，意味著選擇一個元素如果：

選擇父標簽的第二個段落子元素

:nth-of-type選擇器，恩……怎么講呢？限制條件少點~~

我們把上面的實例稍作修改，就可以看到這兩個選擇器之間的差異表現了，如下HTML代碼：

<section><div>我是一個普通的div標簽</div><p>我是第1個p標簽</p><p>我是第2個p標簽</p> <!-- 希望這個變紅 --> </section>

還是與上面例子一致的CSS測試代碼：

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

這時候兩個選擇器所渲染的結果就不一樣了。

p:nth-child(2)悲劇了，其渲染的結果不是第二個p標簽文字變紅，而是第一個p標簽，也就是父標簽的第二個子元素。如下效果截圖：

您可以狠狠地點擊這里：:nth-child測試demo2

p:nth-of-type(2)的表現顯得很堅挺，其把希望渲染的第二個p標簽染紅了，如下截圖：

您可以狠狠地點擊這里：:nth-of-type測試demo2

對照上面兩個選擇器的語義，此處的效果表現差異不難理解。

對于p:nth-child(2)表示這個元素要是p標簽，且是第二個子元素，是兩個必須滿足的條件。于是，就是第一個p標簽顏色為紅色（正好符合：p標簽，第二個子元素）。如果在div標簽后面再插入個span標簽，如下：

<section><div>我是一個普通的div標簽</div><span>我是一個普通的span標簽</span><p>我是第1個p標簽</p><p>我是第2個p標簽</p> <!-- 希望這個變紅 --> </section>

那么p:nth-child(2)將不會選擇任何元素。

而p:nth-of-type(2)表示父標簽下的第二個p元素，顯然，無論在div標簽后面再插入個span標簽，還是h1標簽，都是第二個p標簽中的文字變紅。

這兩者的差異用一個跟切合實際的情況比喻就是計劃生育查人口：前者是如果是第二胎，且是女孩，罰款！后者是管他第幾胎，第二個出身的女孩，罰款！

二、二次深呼吸，個人體會

老實講，對于:nth-child和:nth-of-type這兩個屬性自己用的并不多，對這兩個屬性的認識就像是一團漿糊。印象在使用:last-child這個類似選擇器的時候，出現了沒有效果的情況，現在想想，就是因為對選擇器的理解不夠透徹，所以使用的時候出問題的。

今天對這兩個選擇器好好地過了遍之后，個人覺得:nth-of-type更彪悍些，不容易出問題，盡管:nth-child貌似更常見些。所以以后要選擇某某元素下的第幾個什么標簽，建議使用:nth-of-type，因為頁面元素插入其他標簽啊什么的是比較常見的，如果使用:nth-child，選擇器可能就是嗝屁。

不過嘛，世事無絕對，最靠譜的就是對這兩個選擇器徹徹底底地了解，具體情況具體使用。

另外一個小小的建議，為了避免出現“尼瑪我的:nth-child變成打醬油的不頂鳥用啦！”這樣的疑問，最好使用父標簽層級限制，而不是當前標簽類型限制。如下示例：

dl :nth-child(2) { } /* 恩，這個要靠譜些 */ dd:nth-child(2) { } /* 這個還需要多多斟酌 */

當然，還是那句話，要看實際情況如何，沒有一勞永逸，一方通行的代碼。

目前各個瀏覽器對這兩個選擇器的支持還是挺讓人欣慰的，Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+都是pass的。外帶一提的是jQuery支持基本上大多的選擇器，但是，其中并不包括這里的:nth-of-type，好像是因為這個選擇器用的比較少。如果你想讓jQuery也支持該選擇器，可以使用jQuery選擇器擴展插件，完美支持各個CSS3選擇器，要查看此插件請輕輕地點擊這里：jQuery CSS3選擇器擴展插件。

對了，同等類型的CSS3偽類選擇器并不止這兩個，?:first-of-type,?:last-of-type,?:nth-last-of-type?以及?:only-of-type等，以后有機會的話會簡單介紹這幾個選擇器的。

三、最后的深呼吸，吐氣，淡然的結語

我之前寫過一篇頗有爭議的文章：精簡高效的CSS命名準則/方法。根據里面的觀點，像:nth-child和:nth-of-type這類選擇器應該少用為妙，一是性能，二是本身限制了內容的重用性。

但是，還是那句話，凡事無絕對。有時候因為設計的特殊性，我們可能需要有可以方便控制某些特殊元素的方法，例如浮動列表邊緣處的列表不能有margin值以實現兩端對齊效果，等。此時CSS3選擇器是權衡下來的最優解決方案。因此，熟悉與理解CSS3中的各個選擇器還是有必要的。

?

精通:nth-child

:nth-child 基本用法

:nth-child

:nth-child(8)

選中第8個子元素

li:nth-child(8) span { background-color: #298EB2; box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black; }

使用?:nth-child(8)?可以讓你選中父元素下唯一的第8個子元素

:nth-child 范圍用法

正方向范圍

:nth-child(n+6)

選中從第6個開始的子元素

li:nth-child(n+6) span { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?:nth-child(n+6)?，就相當于讓你選中第6個?:nth-child(6)?和其后的所有子元素

負方向范圍

:nth-child(-n+9)

選中從第1個到第9個子元素

li:nth-child(-n+9) span { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?:nth-child(-n+9)?，就相當讓你選中第9個和其之前的所有子元素

前后限制范圍

nth-child(n+4):nth-child(-n+8)

選中第4-8個子元素

li:nth-child(n+4):nth-child(-n+8) span { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?nth-child(n+4):nth-child(-n+8)?我們可以選中某一范圍內子元素，上面的例子里是從第4個到第8個子元素

?

范圍高級用法

nth-child(n+2):nth-child(odd):nth-child(-n+9)

奇數位/偶數位子元素

?

li:nth-child(n+2):nth-child(odd):nth-child(-n+9) span { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?nth-child(n+2):nth-child(odd):nth-child(-n+9)?我們將會選中的子元素是從第2位到第9位，并且只包含奇數位。

nth-child(3n+1):nth-child(even)?間隔選擇子元素

li:nth-child(n+2):nth-child(odd):nth-child(-n+9) span { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?:nth-child(3n+1)?我們可以每隔3個選中一個，也就是第 1, 4, 7 和 10 個子元素，但通過使用?:nth-child(even)?我們過濾掉了奇數位子元素，也就是 1 和 7，于是，剩下的子元素只有 4 和 10。

:nth-of-type 的用法

:nth-of-type

:nth-of-type(3)

指定要求相同的子元素類型

/* 用藍色圓斑表示 */ span:nth-of-type(3) { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; } /* 用桔色方塊表示 */ div:nth-of-type(4) { background-color: #E17149: box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?:nth-of-type()?，我們可以指定相同的子元素類型，然后再選擇。

:nth-of-type 范圍用法

正方向相同子元素類型范圍

?

span:nth-of-type(n+3)

div:nth-of-type(2n+2)

/* 用藍色圓斑表示 */ span:nth-of-type(n+3) { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; } /* 用橘色方塊表示 */ div:nth-of-type(2n+2) { background-color: #E17149: box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?span:nth-of-type(n+3) 或 div:nth-of-type(2n+2)?，首先指定是相同的子元素類型，然后在這些類型里選擇...

負方向相同子元素類型范圍

?

span:nth-of-type(-n+4)

div:nth-of-type(-n+5)

/* 用藍色圓斑表示 */ span:nth-of-type(-n+4) { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; } /* 用橘色方塊表示 */ div:nth-of-type(-n+5) { background-color: #E17149: box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?span:nth-of-type(-n+4) or div:nth-of-type(-n+5)?，首先指定是相同的子元素類型，然后在這些類型里選擇...

?

前后范圍限制相同子元素類型

?

span:nth-of-type(n+3):nth-of-type(-n+6)

div:nth-of-type(n+1):nth-of-type(-n+3)

?

?

/* 用藍色圓斑表示 */ span:nth-of-type(n+3):nth-of-type(-n+6) { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; } /* 用橘色方塊表示 */ div:nth-of-type(n+1):n-th-of-type(-n+3) { background-color: #E17149: box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?:nth-of-type(n+3):nth-of-type(-n+6) 和 div:nth-of-type(n+1):nth-of-type(-n+3)?，首先指定是相同的子元素類型，然后在這些類型里選擇...這個例子中選中的將會是第 1-3 和 3-6 個子元素。

?

高級相同子類型加前后范圍限制用法

?

span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6)

div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3)

?

?

/* 用藍色圓斑表示 */ span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+7) { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; } /* 用橘色方塊表示 */ div:nth-of-type(n+1):nth-ofo-type(even):nth-of-type(-n+3) { background-color: #E17149: box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; }

使用?span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6) 和 div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3)?，你既能夠限制是在相同類型子元素里選擇，同時指定選擇的起始位置和結束位置。這里同時使用了奇偶位限制。所有，最后剩下的是方 3 & 5 和 圓 2。

來自：http://www.tuicool.com/articles/2eIn6jF

轉載于:https://www.cnblogs.com/myFourLeaf/p/5271119.html

總結

以上是生活随笔為你收集整理的CSS3选择器:nth-child和:nth-of-type之间的差异的那些事儿的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。