|
假設(shè)有以下 HTML 代碼：
<section>
<p>Little</p>
<p>Piggy</p> <!--目標(biāo)元素-->
</section>
以下代碼得到的效果一樣：
p:nth-child(2){color:red;}
p:nth-of-type(2){color:red;}
結(jié)果雖然相同，但是兩者本身還是有所區(qū)別的。
:nth-child 選擇符 從詞義上來(lái)說(shuō)，表示，
選擇滿足以下條件的元素：
- 是一個(gè)段落元素 p
- 是父元素的第二個(gè)子元素
:nth-of-type 選擇符 從詞義上來(lái)看，表示：
- 選擇父元素的第二個(gè)段落元素 p
:nth-of-type 是… 怎么說(shuō)好呢，哈~ … 較少條件要約的。
假設(shè)結(jié)構(gòu)變化如下：
<section>
<h1>World</h1>
<p>Little</p>
<p>Piggy</p> <!--目標(biāo)元素-->
</section>
那么，這種方式就“破”了：
p:nth-child(2){color:red;}
但是，這個(gè)還是”能用”的：
p:nth-of-type(2){color:red;}
所謂的“破”，意思是上面的 :nth-child 選擇符現(xiàn)在選到的是 “Little”，而不是 “Piggy”，因?yàn)檫@個(gè)元素滿足以下所有條件：
- 它是第二個(gè)字元素
- 它是一個(gè)段落元素 p
所說(shuō)的“能用”，意思是 “Piggy” 仍然被選中，因?yàn)樗撬冈叵碌牡诙䝼�(gè)段落元素 p 。
如果在 h1 之后增加一個(gè) h2，那么 :nth-child 選擇符就什么也選中不了了，因?yàn)槟菚r(shí)第二個(gè)子元素就不再是段落元素 p 了。但是 :nth-of-type 仍然還是有效的。
我感覺(jué) :nth-of-type 相對(duì)不那么脆弱，而且總的來(lái)說(shuō)更加有用，盡管 :nth-child 更加常見(jiàn)（作者個(gè)人意見(jiàn)）。你有多少時(shí)候在想“我想選擇父元素的第二個(gè)子元素，如果它恰巧是個(gè)段落元素 p” 這事呢？可能有那么幾次，但是更多的可能是你想“選中第二個(gè)段落”或者“每隔兩行選擇一行 (select every third table row)”，也就是說(shuō) :nth-of-type 是更加好的一個(gè)選擇（再次聲明，作者個(gè)人意見(jiàn)）。
我發(fā)現(xiàn)當(dāng)我抱怨“為什么 :nth-child 選擇符不行？”時(shí)，絕對(duì)多數(shù)的情況是因?yàn)樵谶x擇符前限定了標(biāo)簽，而那個(gè)位置的子元素不是那個(gè)標(biāo)簽。因此在使用 :nth-child 時(shí)，我覺(jué)得最好還是只指定父元素并且不要用標(biāo)簽來(lái)限制 :nth-child 。
dl :nth-child(2) {} /* 推薦 */
dd:nth-child(2) {} /* 不是很好 */
當(dāng)然，具體情況還得具體分析。（我咋這么不喜歡這句話呢 – 糖伴西紅柿）
瀏覽器對(duì)于 :nth-of-type 的支持是相當(dāng)不錯(cuò)的…Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+。如果需要更多的支持，jQuery 應(yīng)該會(huì)挺你的（使用選擇符，添加一個(gè)類名，使用類名來(lái)添加樣式 $(“selector:nth-child(xxxxx)”).addClass(“someClass”)），但是實(shí)際上 jQuery 卻放棄了對(duì) :nth-of-type 的支持，這很奇怪啊，據(jù)說(shuō)是因?yàn)?:nth-of-type 的使用率很低。有個(gè)插件可以使得 jQuery 支持它。
相關(guān)：不要忘了它這些了不起姊妹們 :first-of-type :last-of-type :nth-last-of-type 和 :only-of-type 。更多請(qǐng)看這里。
這里有一個(gè) Lea Verou 做的 可視化示例。
原文：The Difference Between :nth-child and :nth-of-type
譯文：:nth-child 和 :nth-type-of 的區(qū)別
本文鏈接：http://m.95time.cn/tech/web/2011/8507.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
