Rumah >hujung hadapan web >tutorial css >:first-child vs. :first-of-type: Bilakah Saya Harus Menggunakan Setiap CSS Pseudo-class?
:first-child vs. :first-of-type: Bilakah Saya Harus Menggunakan Setiap CSS Pseudo-class?
- Barbara Streisandasal
- 2024-12-09 04:06:18867semak imbas
Pemilihan Elemen dengan :first-child vs. :first-of-type
Dalam CSS, pseudo-class :first-child dan :first-of-type kedua-dua elemen pilih berdasarkan kedudukannya dalam elemen induknya. Walau bagaimanapun, mereka berbeza dalam cara mereka mentakrifkan "pertama."
Elemen:anak pertama
:anak pertama memilih elemen anak pertama daripada induknya yang ditentukan, tanpa mengira jenis unsurnya. Dalam contoh yang disediakan:
div:first-child
Pemilih ini akan sepadan dengan semua
Elemen:first-of-type
:first-of-type memilih yang pertama contoh jenis elemen tertentu dalam induknya. Ia akan sepadan dengan
div:first-of-type
Dalam HTML yang disediakan:
<div class="parent"> <div>Child</div> <h1>
:first-of-type akan memilih
dengan id "pertama" akan menjadi contoh pertama elemen.
Perbezaan Utama
- Hierarki Elemen: :padanan anak pertama berdasarkan susunan anak, manakala :first-of- taip padanan berdasarkan jenis elemen dan kedudukan dalam jenis itu.
- Bilangan Padanan: :anak pertama hanya boleh memadankan satu elemen bagi setiap ibu bapa, manakala :first-of-type boleh memadankan berbilang elemen daripada jenis yang sama.
- Kekhususan: :first- of-type secara amnya mempunyai kekhususan yang lebih tinggi daripada :first-child, bermakna ia akan diutamakan dalam CSS peraturan.
Contoh Penggunaan
Gunakan :first-child untuk memilih:
- Yang pertama item senarai dalam senarai tidak tersusun: ul li:first-child
- Tajuk catatan blog pertama dalam senarai: artikel .blog-post:first-child h2
Gunakan :first-of-type untuk memilih:
- Yang pertama tajuk (
,
, dsb.) dalam dokumen: badan :first-of-type
- Butang pertama dalam borang: form button:first-of-type
Atas ialah kandungan terperinci :first-child vs. :first-of-type: Bilakah Saya Harus Menggunakan Setiap CSS Pseudo-class?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!