CSS first-child 和nth-child 差別是什麼

CSS first-child和nth-child區別：1、first-child是偽類別選擇器，表示符合父元素的第一個子元素；2、nth-child表示符合父元素的第n個子元素。

本教學操作環境：windows7系統、css3版本、Dell G3電腦。

推薦：《css影片教學》

first-child

E:first-child是偽類別選擇器，

符合父元素的第一個子元素E

從說明可以看出E是你要選擇的第一個子元素，而不是父元素。一開始，誤以為E:first-child是E的第一個子元素。

:nth-child(n)

符合父元素的第n個子元素E

E也是子元素，而且只能匹配父元素下第n個子元素。 n是從1開始計數

<ul>
  <li>l1</li>
  <li>l2</li>
  <li>l3</li>
</ul>

若要選擇

l1

ul>li:first-child

若要選擇

l2

ul>li:nth-child(2)

<div>
    <h1 id="h">h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

這時選擇第一個p元素，應用p:first-child則會出現錯誤，因為p的父元素是div，而對於div來說，它的第一個子元素不是p，而是h1，所以如果選擇器p:first-child，則會出錯。

同理，E:last-child``E:only-child與上面的一樣，E元素必須是其父元素的最後一個子元素或唯一一個子元素才可以

更多程式相關知識，請造訪：程式設計教學！ ！

以上是CSS first-child 和nth-child 差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！