:nth-child和:nth-of-type都是CSS3中的偽類選擇器,其作用近似卻又不完全一樣,對(duì)于不熟悉的人對(duì)其可能不是很區(qū)分,本文就將介紹兩者的不同,以便于大家正確靈活使用這兩類選擇器。
先看一個(gè)簡單的實(shí)例,首先是HTML部分:
然后兩個(gè)選擇器相對(duì)應(yīng)的CSS代碼如下:
上面這個(gè)例子中,這兩個(gè)選擇器所實(shí)現(xiàn)的效果是一致的,第二個(gè)p
標(biāo)簽的文字變成了紅色,如下截圖(截自IE9):
盡管上面兩個(gè)demo的最后效果一致,但是兩個(gè)選擇器之間存在差異是必然的。
對(duì)于:nth-child
選擇器,在簡單白話文中,意味著選擇一個(gè)元素如果:
對(duì)于:nth-of-type
選擇器,意味著選擇一個(gè)元素如果:
:nth-of-type
選擇器,恩……怎么講呢?限制條件少點(diǎn)~~
我們把上面的實(shí)例稍作修改,就可以看到這兩個(gè)選擇器之間的差異表現(xiàn)了,如下HTML代碼:
還是與上面例子一致的CSS測試代碼:
這時(shí)候兩個(gè)選擇器所渲染的結(jié)果就不一樣了。
p:nth-child(2)
悲劇了,其渲染的結(jié)果不是第二個(gè)p
標(biāo)簽文字變紅,而是第一個(gè)p
標(biāo)簽,也就是父標(biāo)簽的第二個(gè)子元素。如下效果截圖:
您可以狠狠地點(diǎn)擊這里::nth-child測試demo2
p:nth-of-type(2)
的表現(xiàn)顯得很堅(jiān)挺,其把希望渲染的第二個(gè)p
標(biāo)簽染紅了,如下截圖:
您可以狠狠地點(diǎn)擊這里::nth-of-type測試demo2
對(duì)照上面兩個(gè)選擇器的語義,此處的效果表現(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
元素,顯然,無論在div
標(biāo)簽后面再插入個(gè)span
標(biāo)簽,還是h1
標(biāo)簽,都是第二個(gè)p
標(biāo)簽中的文字變紅。
這兩者的差異用一個(gè)跟切合實(shí)際的情況比喻就是計(jì)劃生育查人口:前者是如果是第二胎,且是女孩,罰款!后者是管他第幾胎,第二個(gè)出身的女孩,罰款!
老實(shí)講,對(duì)于:nth-child和:nth-of-type這兩個(gè)屬性自己用的并不多,對(duì)這兩個(gè)屬性的認(rèn)識(shí)就像是一團(tuán)漿糊。印象在使用:last-child
這個(gè)類似選擇器的時(shí)候,出現(xiàn)了沒有效果的情況,現(xiàn)在想想,就是因?yàn)閷?duì)選擇器的理解不夠透徹,所以使用的時(shí)候出問題的。
今天對(duì)這兩個(gè)選擇器好好地過了遍之后,個(gè)人覺得:nth-of-type
更彪悍些,不容易出問題,盡管:nth-child
貌似更常見些。所以以后要選擇某某元素下的第幾個(gè)什么標(biāo)簽,建議使用:nth-of-type
,因?yàn)轫撁嬖夭迦肫渌麡?biāo)簽啊什么的是比較常見的,如果使用:nth-child
,選擇器可能就是嗝屁。
不過嘛,世事無絕對(duì),最靠譜的就是對(duì)這兩個(gè)選擇器徹徹底底地了解,具體情況具體使用。
另外一個(gè)小小的建議,為了避免出現(xiàn)“尼瑪我的:nth-child變成打醬油的不頂鳥用啦!”這樣的疑問,最好使用父標(biāo)簽層級(jí)限制,而不是當(dāng)前標(biāo)簽類型限制。如下示例:
當(dāng)然,還是那句話,要看實(shí)際情況如何,沒有一勞永逸,一方通行的代碼。
目前各個(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ì)了,同等類型的CSS3偽類選擇器并不止這兩個(gè), :first-of-type
, :last-of-type
, :nth-last-of-type
以及 :only-of-type
等,以后有機(jī)會(huì)的話會(huì)簡單介紹這幾個(gè)選擇器的。
我之前寫過一篇頗有爭議的文章:精簡高效的CSS命名準(zhǔn)則/方法。根據(jù)里面的觀點(diǎn),像:nth-child
和:nth-of-type
這類選擇器應(yīng)該少用為妙,一是性能,二是本身限制了內(nèi)容的重用性。
但是,還是那句話,凡事無絕對(duì)。有時(shí)候因?yàn)樵O(shè)計(jì)的特殊性,我們可能需要有可以方便控制某些特殊元素的方法,例如浮動(dòng)列表邊緣處的列表不能有 margin值以實(shí)現(xiàn)兩端對(duì)齊效果,等。此時(shí)CSS3選擇器是權(quán)衡下來的最優(yōu)解決方案。因此,熟悉與理解CSS3中的各個(gè)選擇器還是有必要的。
隨著IE6~8瀏覽器緩慢地日落,CSS3的時(shí)代可能就會(huì)在不知不覺中到來,面對(duì)這必然的趨勢,我們是時(shí)候做好準(zhǔn)備了。
感謝閱讀,歡迎糾錯(cuò)。
原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com/wordpress/?p=1709]