Apakah Perbezaan Antara Pemilih `:first-child` dan `:first-of-type` CSS?

Bagaimana :anak pertama dan :first-of-Type Berbeza

Walaupun kelihatan setara, :first-of and :first-of -jenis mempamerkan perbezaan yang halus. Memahami perbezaan ini adalah penting untuk penyasaran CSS yang berkesan.

:anak pertama

:anak pertama sepadan dengan semua elemen yang merupakan anak pertama ibu bapa mereka. Dalam contoh yang disediakan, ia akan menggayakan elemen div pertama dalam induknya:

div:first-child { ... }

:first-of-type

Sebaliknya, :first-of -jenis sepadan dengan elemen pertama jenis tertentu dalam induknya, tidak kira sama ada ia adalah anak pertama. Menggunakan teg div sebagai contoh:

div:first-of-type { ... }

Dalam kes ini, ia akan menggayakan elemen div pertama dalam induknya, walaupun ia didahului oleh jenis elemen lain, seperti h1.

Perbezaan Utama

Perbezaan penting terletak pada skop perbandingan. :first-child mempertimbangkan kedudukan elemen di kalangan semua adik-beradiknya, manakala :first-of-type memfokuskan semata-mata pada tika pertama jenis elemen tertentu dalam induknya.

Implikasi

Perbezaan ini mempunyai beberapa implikasi:

• :anak pertama hanya boleh padankan satu elemen bagi setiap ibu bapa, kerana hanya boleh ada seorang anak pertama.
• :jenis pertama boleh memadankan berbilang elemen dalam ibu bapa, asalkan ia daripada jenis yang sama.
• :first-child biasanya bersamaan dengan :nth-child(1), tetapi :first-of-type mungkin memadankan elemen dengan nilai nth-child yang lebih tinggi jika jenis elemen lain mendahului mereka.

Atas ialah kandungan terperinci Apakah Perbezaan Antara Pemilih `:first-child` dan `:first-of-type` CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!