Bagaimana untuk Menyasarkan Kejadian Pertama Kelas Dalam Elemen Induk dalam CSS?

Memilih Kejadian Pertama Kelas Dalam Ibu Bapa

Dalam CSS, cabaran timbul apabila anda perlu menyasarkan elemen pertama sesuatu kelas tertentu dalam elemen induk, terutamanya apabila kelas itu mungkin muncul dalam pelbagai kedudukan dalam adik-beradiknya. Isu ini menjadi lebih rumit apabila kelas unsur induk atau struktur anak mungkin berbeza.

Kelas Pseudo jenis pertama

CSS3 menawarkan :first -of-type pseudo-class, yang membolehkan anda memilih elemen pertama jenis tertentu dalam adik-beradiknya. Walau bagaimanapun, tiada kelas pseudo kelas pertama yang setara khusus untuk memilih elemen pertama kelas tertentu.

Penyelesaian Menggunakan ~ dan Pemilih Adik Beradik Am

Satu penyelesaian ialah menggunakan penggabung bersaudara am (~) bersama-sama dengan peraturan yang mengatasi. Dengan mengetahui gaya lalai yang digunakan pada elemen lain dengan kelas yang sama, anda boleh membuat peraturan yang lebih khusus yang mengatasi gaya lalai hanya untuk elemen yang mengikuti kejadian pertama kelas sasaran.

Contoh :

.parentClass > * > .targetClass {
    /* Apply styles to all .targetClass elements within .parentClass */
}

.parentClass > * > .targetClass ~ .targetClass {
    /* Apply overriding styles only to .targetClass elements that follow */
}

Ilustrasi:

Pertimbangkan struktur HTML berikut:

<div class="parentClass">
    <div class="someOtherClass">...</div>
    <div class="targetClass">First target</div>
    <div class="targetClass">Second target</div>
    <div class="targetClass">Third target</div>
</div>

Dalam senario ini, peraturan pertama akan menggunakan gaya pada semua elemen dengan kelas "targetClass" di dalam elemen "parentClass". Peraturan kedua akan mengatasi gaya tersebut untuk semua elemen "targetClass" yang mengikuti yang pertama, mengembalikan mana-mana gaya tersuai yang digunakan oleh peraturan pertama.

Keserasian Pelayar:

Penggabung bersaudara am (~) diiktiraf oleh IE7 dan kemudiannya. Oleh itu, penyelesaian ini serasi dengan semua penyemak imbas utama kecuali IE6.

Atas ialah kandungan terperinci Bagaimana untuk Menyasarkan Kejadian Pertama Kelas Dalam Elemen Induk dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!