:first-child vs. :first-of-type: When Should I Use Each CSS Pseudo-class?

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

Salin selepas log masuk

Pemilih ini akan sepadan dengan semua

unsur-unsur yang merupakan anak pertama unsur induknya. Jika elemen induk mengandungi sebarang jenis elemen lain, ia tidak akan dipilih.

Elemen:first-of-type

:first-of-type memilih yang pertama contoh jenis elemen tertentu dalam induknya. Ia akan sepadan dengan

elemen, walaupun ia bukan anak pertama secara keseluruhan. Contohnya:

div:first-of-type

Salin selepas log masuk

Dalam HTML yang disediakan:

<div class="parent">
  <div>Child</div>
  <h1>

Salin selepas log masuk

:first-of-type akan memilih

dengan kelas "ibu bapa" sebagai contoh pertama

elemen, manakala

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!

Artikel sebelumnya：Bagaimanakah Saya Boleh Memastikan Keterlihatan Bar Tatal pada macOS untuk Pengguna Pad Jejak dalam Penyemak Imbas WebKit/Blink? Artikel seterusnya：Bagaimanakah Saya Boleh Membuat Balutan Teks Dengan Betul Dalam Bekas HTML Lebar Tetap?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Isu terkini