Perbezaan antara ": nth-child", ": first-child" dan ": first-of-type" dalam CSS

Rujukan

Penjelasan terperinci

Pertama, mari kita lihat contoh kod HTML berikut, melalui kod ini kita akan memahami penggunaan ketiga-tiga pemilih satu persatu.

            <div id="divMain">
    <div>
        <p id="p1">p1</p>
        <div id="div1">div1</div>
        <p id="p2">p2</p>
    </div>
    <p id="p3">p3</p>
    <div id="div2">div2<div>
</div>
<style>
/*css1*/
#divMain div:nth-child(2) {
    color: blue;
}
/*css2*/
#divMain p:first-child {
    color: red;
}
/*css3*/
#divMain p:first-of-type {
    background-color: blue;
}
</style>
        

": Nth-child" menerangkan secara terperinci

Makna css1 dalam kod di atas adalah elemen anak kedua dan jenisnya adalah "div", jadi hanya div1 yang dipilih. div1 adalah elemen anak kedua dalam bekas induk dan jenisnya adalah "div". p3 adalah elemen anak kedua dari bekas induk, tetapi bukan jenis "div" sehingga tidak dipilih. Sekiranya kita mengubah gaya untuk membuang div di depan pemilih, maka p3 juga akan dipilih.

": Anak pertama" menerangkan secara terperinci

Makna css2 dalam kod di atas adalah elemen anak pertama dan jenisnya adalah p, jadi hanya p1 yang dipilih. p1 adalah elemen anak pertama dalam bekas induk dan jenisnya adalah "p". Ini memiliki arti yang serupa dengan yang di atas ": nth-child". Sekiranya anda menggunakan ": nth-child" untuk meneruskan parameter ke 1, kesannya sama.

": Jenis pertama" dijelaskan secara terperinci

Makna css3 dalam kod di atas adalah bahawa jenis pertama adalah elemen anak dari "p". Perbezaan di sini dari dua pemilih di atas adalah bahawa jenis yang sesuai pertama kali dijumpai, dan kemudian elemen pertama yang sesuai dengan jenis itu diperoleh . Jadi yang terpilih adalah p1 dan p3. Kedua-dua p1 dan p3 adalah elemen "p" pertama dalam bekas induk.