CSSの最初の子とn番目の子の違いは何ですか

CSS の first-child と nth-child の違い: 1. first-child は擬似クラス セレクターであり、親要素の最初の子要素と一致することを意味します; 2. nth-child は親要素の最初の子要素と一致することを意味します親要素の子要素の n 番目の子要素。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。

推奨: "css ビデオ チュートリアル "

first-child

E: first-child は疑似クラスですselector ,

親要素 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>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の最初の子とn番目の子の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。