一、深呼吸，直接內(nèi)容

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

先看一個(gè)簡(jiǎn)單的實(shí)例，首先是HTML部分：

然后兩個(gè)選擇器相對(duì)應(yīng)的CSS代碼如下：

上面這個(gè)例子中，這兩個(gè)選擇器所實(shí)現(xiàn)的效果是一致的，第二個(gè)p標(biāo)簽的文字變成了紅色，如下截圖（截自IE9）：

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

對(duì)于:nth-child選擇器，在簡(jiǎn)單白話文中，意味著選擇一個(gè)元素如果：

1. 這是個(gè)段落元素
2. 這是父標(biāo)簽的第二個(gè)孩子元素

對(duì)于:nth-of-type選擇器，意味著選擇一個(gè)元素如果：

1. 選擇父標(biāo)簽的第二個(gè)段落子元素

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

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

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

這時(shí)候兩個(gè)選擇器所渲染的結(jié)果就不一樣了。

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

您可以狠狠地點(diǎn)擊這里：:nth-child測(cè)試demo2

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

您可以狠狠地點(diǎn)擊這里：:nth-of-type測(cè)試demo2

對(duì)照上面兩個(gè)選擇器的語(yǔ)義，此處的效果表現(xiàn)差異不難理解。

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

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

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

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

二、二次深呼吸，個(gè)人體會(huì)

老實(shí)講，對(duì)于:nth-child和:nth-of-type這兩個(gè)屬性自己用的并不多，對(duì)這兩個(gè)屬性的認(rèn)識(shí)就像是一團(tuán)漿糊。印象在使用:last-child這個(gè)類(lèi)似選擇器的時(shí)候，出現(xiàn)了沒(méi)有效果的情況，現(xiàn)在想想，就是因?yàn)閷?duì)選擇器的理解不夠透徹，所以使用的時(shí)候出問(wèn)題的。

今天對(duì)這兩個(gè)選擇器好好地過(guò)了遍之后，個(gè)人覺(jué)得:nth-of-type更彪悍些，不容易出問(wèn)題，盡管:nth-child貌似更常見(jiàn)些。所以以后要選擇某某元素下的第幾個(gè)什么標(biāo)簽，建議使用:nth-of-type，因?yàn)轫?yè)面元素插入其他標(biāo)簽啊什么的是比較常見(jiàn)的，如果使用:nth-child，選擇器可能就是嗝屁。

不過(guò)嘛，世事無(wú)絕對(duì)，最靠譜的就是對(duì)這兩個(gè)選擇器徹徹底底地了解，具體情況具體使用。

另外一個(gè)小小的建議，為了避免出現(xiàn)“尼瑪我的:nth-child變成打醬油的不頂鳥(niǎo)用啦！”這樣的疑問(wèn)，最好使用父標(biāo)簽層級(jí)限制，而不是當(dāng)前標(biāo)簽類(lèi)型限制。如下示例：

當(dāng)然，還是那句話，要看實(shí)際情況如何，沒(méi)有一勞永逸，一方通行的代碼。

目前各個(gè)瀏覽器對(duì)這兩個(gè)選擇器的支持還是挺讓人欣慰的，F(xiàn)irefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+都是pass的。外帶一提的是jQuery支持基本上大多的選擇器，但是，其中并不包括這里的:nth-of-type，好像是因?yàn)檫@個(gè)選擇器用的比較少。如果你想讓jQuery也支持該選擇器，可以使用jQuery選擇器擴(kuò)展插件，完美支持各個(gè)CSS3選擇器，要查看此插件請(qǐng)輕輕地點(diǎn)擊這里：jQuery CSS3選擇器擴(kuò)展插件。

對(duì)了，同等類(lèi)型的CSS3偽類(lèi)選擇器并不止這兩個(gè)， :first-of-type, :last-of-type, :nth-last-of-type 以及 :only-of-type等，以后有機(jī)會(huì)的話會(huì)簡(jiǎn)單介紹這幾個(gè)選擇器的。

三、最后的深呼吸，吐氣，淡然的結(jié)語(yǔ)

我之前寫(xiě)過(guò)一篇頗有爭(zhēng)議的文章：精簡(jiǎn)高效的CSS命名準(zhǔn)則/方法。根據(jù)里面的觀點(diǎn)，像:nth-child和:nth-of-type這類(lèi)選擇器應(yīng)該少用為妙，一是性能，二是本身限制了內(nèi)容的重用性。

但是，還是那句話，凡事無(wú)絕對(duì)。有時(shí)候因?yàn)樵O(shè)計(jì)的特殊性，我們可能需要有可以方便控制某些特殊元素的方法，例如浮動(dòng)列表邊緣處的列表不能有 margin值以實(shí)現(xiàn)兩端對(duì)齊效果，等。此時(shí)CSS3選擇器是權(quán)衡下來(lái)的最優(yōu)解決方案。因此，熟悉與理解CSS3中的各個(gè)選擇器還是有必要的。

隨著IE6~8瀏覽器緩慢地日落，CSS3的時(shí)代可能就會(huì)在不知不覺(jué)中到來(lái)，面對(duì)這必然的趨勢(shì)，我們是時(shí)候做好準(zhǔn)備了。

感謝閱讀，歡迎糾錯(cuò)。

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com/wordpress/?p=1709]