Bagaimanakah Pemilih `:first-of-type` CSS3 Berfungsi dengan Nama Kelas?

Menggunakan Pemilih CSS3 :first-of-type dengan Nama Kelas

Adalah salah tanggapan umum bahawa pemilih CSS3 :first-of -type boleh digunakan bersama dengan nama kelas untuk memilih elemen pertama dengan kelas tertentu itu. Walau bagaimanapun, ini tidak berlaku.

Kelas semu :first-of-type menyasarkan elemen pertama jenisnya dalam kalangan adik beradik. Oleh itu, menggunakan pemilih kelas dengan :first-of-type memilih elemen pertama dengan kelas itu yang juga merupakan elemen pertama jenisnya.

Untuk menggambarkan:

p:first-of-type { color: blue; }

Peraturan ini akan menjadikan perenggan pertama unsur induknya menjadi biru.

p.myclass1:first-of-type { color: red; }

Peraturan ini akan menjadikan perenggan pertama dengan kelas "myclass1" merah.

Walau bagaimanapun, jika terdapat berbilang perenggan dengan kelas "myclass1", hanya perenggan pertama akan dipengaruhi oleh peraturan ini, kerana ia menyasarkan perenggan pertama jenisnya yang juga mempunyai kelas yang ditentukan.

Untuk memilih kejadian pertama kelas, tanpa mengira jenisnya, tiada pemilih CSS3 langsung tersedia. Sebaliknya, penyelesaian yang melibatkan berbilang pemilih dan lata boleh digunakan:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default color */; }

Penyelesaian ini berfungsi dengan menetapkan warna awal untuk elemen dengan kelas "myclass1". Peraturan berikutnya kemudian menggantikan warna untuk mana-mana elemen lain dengan kelas yang sama iaitu adik beradik kepada elemen pertama.

Pada dasarnya, mengingati bahawa :first-of-type menyasarkan elemen pertama jenisnya, bukannya elemen pertama dengan kelas tertentu, adalah penting apabila menggunakannya dalam pemilih CSS3.

Atas ialah kandungan terperinci Bagaimanakah Pemilih `:first-of-type` CSS3 Berfungsi dengan Nama Kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!