Bolehkah saya Menggunakan Pemilih `:first-of-type` CSS3 dengan Nama Kelas?

Menggunakan CSS3 Selector :first-of-type with Class Names

Seseorang mungkin tertanya-tanya sama ada mungkin untuk menggunakan CSS3 selector :first -of-type bersempena dengan nama kelas. Walau bagaimanapun, hanya menggunakan pemilih ini sahaja mungkin tidak mencukupi.

Penjelasan

Kelas pseudo :first-of-type menyasarkan elemen pertama jenis tertentu dalam adik beradik. Apabila digabungkan dengan pemilih kelas, ia menapis elemen yang kedua-duanya memiliki kelas yang ditentukan dan merupakan elemen pertama jenisnya dalam kalangan adik-beradik mereka.

Malangnya, CSS tidak mempunyai pemilih :first-of-class yang semata-mata mencari kejadian pertama unsur dengan tertentu kelas.

Penyelesaian

Untuk mengatasi had ini, seseorang boleh menggunakan teknik berikut:

.myclass1 {
  color: red;
}

.myclass1 ~ .myclass1 {
  color: /* default or inherited from parent div */;
}

Penjelasan

Penyelesaian ini menggunakan penggabung beradik am (~) untuk menyasarkan semua elemen dengan kelas myclass1 yang didahului oleh elemen lain dengan kelas yang sama. Dengan menetapkan warna elemen berikutnya ini kepada lalai atau diwarisi daripada div induk, kami menyekat warna merah dengan berkesan untuk semua kecuali kejadian pertama .myclass1.

Sumber Tambahan

Penjelasan yang lebih terperinci dan ilustrasi visual penyelesaian ini boleh didapati di sini:

• [Rangkaian Pembangun Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Adjacent_sibling_selectors)
• [Helah CSS ](https://css-tricks.com/almanac/selectors/c/combinators/#:~:text=The ~ combinator memilih semua,= 30 (kelas mempunyai kekhususan))

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