CSS中first-child和nth-child有哪區(qū)別

發(fā)布時(shí)間：2021-01-08 13:48:26 來(lái)源：億速云閱讀：326 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下CSS中first-child和nth-child有哪區(qū)別，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

CSS first-child和nth-child區(qū)別：1、first-child是偽類(lèi)選擇器，表示匹配父元素的第一個(gè)子元素；2、nth-child表示匹配父元素的第n個(gè)子元素。

first-child

E:first-child是偽類(lèi)選擇器，

匹配父元素的第一個(gè)子元素E

從說(shuō)明可以看出E是你要選擇的第一個(gè)子元素，而不是父元素。一開(kāi)始，誤以為E:first-child是E的第一個(gè)子元素。

:nth-child(n)

匹配父元素的第n個(gè)子元素E

E也是子元素，而且也只能匹配父元素下第n個(gè)子元素。n是從1開(kāi)始計(jì)數(shù)

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

若要選擇 <li>l1</li> ul>li:first-child

若要選擇 <li>l2</li> ul>li:nth-child(2)

<div>
    <h2>h2</h2>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

這時(shí)選擇第一個(gè)p元素，應(yīng)用p:first-child則會(huì)出現(xiàn)錯(cuò)誤，因?yàn)閜的父元素是div，而對(duì)于div來(lái)說(shuō)，它的第一個(gè)子元素不是p，而是h2，所以如果選擇器p:first-child，則會(huì)出錯(cuò)。

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

以上是“CSS中first-child和nth-child有哪區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

CSS中first-child和nth-child有哪區(qū)別

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽