原文:The Difference Between :nth-child and :nth-of-type
譯文::nth-child 和 :nth-type-of 的區別
假設有以下 HTML 代碼:
<section> <p>Little</p> <p>Piggy</p> <!--目標元素--> </section>
以下代碼得到的效果一樣:
p:nth-child(2){color:red;} p:nth-of-type(2){color:red;}
結果雖然相同,但是兩者本身還是有所區別的。
:nth-child 選擇符 從詞義上來說,表示,
選擇滿足以下條件的元素:
:nth-of-type 選擇符 從詞義上來看,表示:
:nth-of-type 是… 怎麼說好呢,哈~ … 較少條件要約的。
假設結構變化如下:
<section> <h1>World</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”,因為這個元素滿足以下所有條件:
所說的“能用”,意思是 “Piggy” 仍然被選中,因為它是它父元素下的第二個段落元素 p 。
如果在 h1 之後增加一個 h2,那麼 :nth-child 選擇符就什麼也選中不了了,因為那時第二個子元素就不再是段落元素 p 了。但是 :nth-of-type 仍然還是有效的。
我感覺 :nth-of-type 相對不那麼脆弱,而且總的來說更加有用,盡管 :nth-child 更加常見(作者個人意見)。你有多少時候在想“我想選擇父元素的第二個子元素,如果它恰巧是個段落元素 p” 這事呢?可能有那麼幾次,但是更多的可能是你想“選中第二個段落”或者“每隔兩行選擇一行 (select every third table row)”,也就是說 :nth-of-type 是更加好的一個選擇(再次聲明,作者個人意見)。
我發現當我抱怨“為什麼 :nth-child 選擇符不行?”時,絕對多數的情況是因為在選擇符前限定了標簽,而那個位置的子元素不是那個標簽。因此在使用 :nth-child 時,我覺得最好還是只指定父元素並且不要用標簽來限制 :nth-child 。
dl :nth-child(2) {} /* 推薦 */ dd:nth-child(2) {} /* 不是很好 */
當然,具體情況還得具體分析。(我咋這麼不喜歡這句話呢 – 糖伴西紅柿)
浏覽器對於 :nth-of-type 的支持是相當不錯的…Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+。如果需要更多的支持,jQuery 應該會挺你的(使用選擇符,添加一個類名,使用類名來添加樣式 $(“selector:nth-child(xxxxx)”).addClass(“someClass”)),但是實際上 jQuery 卻放棄了對 :nth-of-type 的支持,這很奇怪啊,據說是因為 :nth-of-type 的使用率很低。有個插件可以使得 jQuery 支持它。
相關:不要忘了它這些了不起姊妹們 :first-of-type :last-of-type :nth-last-of-type 和 :only-of-type 。更多請看這裡。
這裡有一個 Lea Verou 做的可視化示例。