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

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

我要評論

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.首先是個p元素
2.其次這個p元素是其父元素的第二個孩子
:nth-of-type 選擇器，在此例子中意思就是指
1.定位一個父元素下的第二個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; } /* 無法正確定位 */
p:nth-of-type(2) { color: red; } /* 依然有效 */

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

復(fù)制代碼

代碼如下:

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

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

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

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

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