讓我們看下面一段html：?

復制代碼代碼如下:?
<section>?
<p>Little</p>?
<p>Piggy</p> <!-- 定位此元素-->?
</section>?

下面的2種寫法都可以達到目的?

復制代碼代碼如下:?
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 可能更符合我們日常的思維方式?
讓我們改變下html：?

復制代碼代碼如下:?
<section>?
<h1>Words</h1>?
<p>Little</p>?
<p>Piggy</p> <!-- 定位此元素 -->?
</section>?

同樣用之前的2種方法:?

復制代碼代碼如下:?
p:nth-child(2) { color: red; } /* 無法正確定位 */?
p:nth-of-type(2) { color: red; } /* 依然有效 */?

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

復制代碼代碼如下:?
dl :nth-child(2) {} / * 這樣更好些 * /?
dd:nth-child(2) {} / * 比這個 * /?

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

轉載于:https://www.cnblogs.com/diguonianzhu/archive/2012/05/09/2491899.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的[css3]:nth-child与:nth-of-type的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。