CSSでのfirst-childとnth-childの説明

:first-child E:first-childは擬似セレクタであり、多くの人がその存在を知っているが、使用時には誤解が残る可能性がある.
説明
親要素に一致する最初のサブ要素E
説明から、Eは親要素ではなく、選択する最初のサブ要素であることがわかります.最初は、E:first-childがEの最初のサブエレメントだと勘違いしていた.
例を挙げます.

<ul>
    <li>l1li>
    <li>l2li>
    <li>l3li>
ul>

最初のli要素が選択されたと仮定すると、セレクタはli:first-childではなくul:first-childであるべきである.

<div>
    <h1>h1h1>
    <p>p1p>
    <p>p2p>
    <p>p3p>
div>

このとき、最初のp要素が選択され、p:first-childが適用されるとエラーが発生する.pの親要素はdivであり、divの場合、最初のサブ要素はpではなくh 1であるため、セレクタp:first-childではエラーが発生する.
同様に、E:last-child``E:only-childは、上記と同様に、E要素が親要素の最後のサブ要素または唯一のサブ要素である必要があります.
:nth-child(n)
説明
親要素に一致するn番目のサブ要素E
Eもサブエレメントであり、親エレメントの下のn番目のサブエレメントにしか一致しません.nは1からカウント

<div>
    <h1>h1h1>
    <p>p1p>
    <p>p2p>
    <p>p3p>
div>

なお、上記の例では、今回最初のp要素を選択する場合、p:nth-child(2)を使用することができます.なぜなら、最初のp要素は親要素 ， n 2。

：E:nth-child(n)の で、Eはあなたが する であり、nはE の の で、E が かれている であるからです.

このブログは、 にcssセレクタについて が りないことに づいたとき、 に いたものです.だからcssに するセレクタは にとどまらず、もっと しなければならない.ここではcssセレクタを するサイトをお めします.http://flukeout.github.io/
されたインタフェースを じて、 のセレクタが き わった 、 した を ることができます.