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開始計數

  
l1
  
l2
  
l3

若要選擇25edfb22a4f469ecb59f1190150159c6l1bed06894275b65c1ab86501b08a632eb ul>li:first-child

若要選擇25edfb22a4f469ecb59f1190150159c6l2bed06894275b65c1ab86501b08a632eb ul>li:nth-child(2)

    
h1
    
p1
    
p2
    
p3

這時選擇第一個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中文網其他相關文章！