css :nth-child與:nth-of-type之小解

發(fā)布時(shí)間：2011-10-07 00:40:07 作者：佚名

我要評(píng)論

css :nth-child與:nth-of-type之小解,需要的朋友可以參考下。

讓我們看下面一段html：

復(fù)制代碼

代碼如下:

<section>
<p>Little</p>
<p>Piggy</p> 
</section>

下面的2種寫法都可以達(dá)到目的

復(fù)制代碼

代碼如下:

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

但兩者是存在差異的
:nth-child 選擇器，在此例子中意思就是指
1.首先是個(gè)p元素
2.其次這個(gè)p元素是其父元素的第二個(gè)孩子
:nth-of-type 選擇器，在此例子中意思就是指
1.定位一個(gè)父元素下的第二個(gè)p元素
:nth-of-type 可能更符合我們?nèi)粘５乃季S方式
讓我們改變下html：

復(fù)制代碼

代碼如下:

<section>
<h1>Words</h1>
<p>Little</p>
<p>Piggy</p> 
</section>

同樣用之前的2種方法:

復(fù)制代碼

代碼如下:

p:nth-child(2) { color: red; } /* 無(wú)法正確定位 */
p:nth-of-type(2) { color: red; } /* 依然有效 */

按照之前的解釋簡(jiǎn)單分析下：
:nth-child 選擇器
首先是個(gè)p元素，沒(méi)有問(wèn)題，但是其父元素的第二個(gè)孩子是<p>Little</p>，所以沒(méi)有正確定位
:nth-of-type 選擇器
父元素下的第二個(gè)p元素，正是我們想要的結(jié)果
再進(jìn)一步，如果我在 h1之后加入一個(gè)h2,在這個(gè)例子中:nth-child選擇器則無(wú)法定位任何元素，因?yàn)楦冈氐牡诙€(gè)元素是 h2，而不是p元素。相對(duì)的， :nth-of-type依然有效。
我個(gè)人覺(jué)得:nth-of-type更健壯些，盡管:nth-child貌似用的更多些。而且大部分時(shí)候，我們的想法都可能會(huì)是“定位一個(gè)父元素下的第二個(gè)p元素”，而不是“定位一個(gè)父元素下的第二個(gè)元素，如果它是個(gè)p元素的話”。
我遇到的大多數(shù)“我自問(wèn):為什么這個(gè):nth-child選擇器不起作用”的時(shí)候,基本都是因?yàn)槲医o:nth-child選擇器前置了一個(gè)標(biāo)簽，但是那個(gè)孩子節(jié)點(diǎn)并不是那個(gè)標(biāo)簽。所以當(dāng)我用:nth-child的時(shí)候，我覺(jué)得最好只指定父元素，:nth-child不要前置子元素標(biāo)簽。
像下面這樣：

復(fù)制代碼

代碼如下:

dl :nth-child(2) {} / * 這樣更好些 * /
dd:nth-child(2) {} / * 比這個(gè) * /

當(dāng)然，一切視具體情況而定。
目前Safari3.1+，IE9+，ff3.5+，Opera9.5+，Chrome2+ 都支持:nth-of-type選擇器。如果你希望在較舊的瀏覽器中支持，可以考慮jQuery。值得注意的是jQuery中:nth-child是按照標(biāo)準(zhǔn)來(lái)實(shí)現(xiàn)的，是從1開(kāi)始計(jì)數(shù)，而jquery中得 :eq是從0開(kāi)始。

當(dāng)然，一切視具體情況而定。

目前Safari3.1+，IE9+，ff3.5+，Opera9.5+，Chrome2+ 都支持:nth-of-type選擇器。如果你希望在較舊的瀏覽器中支持，可以考慮jQuery。值得注意的是jQuery中:nth-child是按照標(biāo)準(zhǔn)來(lái)實(shí)現(xiàn)的，是從1開(kāi)始計(jì)數(shù)，而jquery中得 :eq是從0開(kāi)始。

這里還有個(gè)測(cè)試頁(yè)面, 可以幫助你更好地理解。
以上是我的譯文，翻譯的不妥之處，感謝指出?？芍苯娱喿x原文.