Bagaimana untuk Memilih Kejadian Pertama Elemen Kelas Tertentu dalam Membeza-bezakan Struktur?

Memilih Kejadian Pertama Elemen Kelas Tertentu

Memilih kejadian pertama elemen kelas tertentu boleh mencabar apabila struktur dan elemen kiraan dalam elemen induk berbeza-beza. Dalam kes ini, isu timbul semasa cuba memilih elemen pertama dengan kelas 'A' dalam elemen dengan id atau kelas 'B'.

Mengatasi Cabaran dengan CSS3

CSS3 menawarkan :first-of-type pseudo-class, yang menyasarkan elemen pertama jenis tertentu dalam kalangan adik-beradiknya. Walau bagaimanapun, tiada kelas pseudo kelas pertama yang setara.

Penyelesaian Penyelesaian

Sebagai penyelesaian, seseorang boleh menggunakan penggabung beradik am (~ ) dan gunakan peraturan mengatasi untuk "buat asal" gaya asal yang digunakan pada semua elemen .A dalam elemen .C.

Kod CSS

Kod CSS berikut menyediakan penyelesaian:

.C > * > .A {
    /* Style every .A that's a grandchild of .C */
}

.C > * > .A ~ .A {
    /* Override styles only for .A elements following the first .A child */
}

Kod ini menggunakan gaya untuk semua elemen .A yang merupakan cucu kepada .C. Selain itu, ia mengatasi gaya untuk elemen .A berikutnya yang mengikuti .Anak pertama bagi setiap elemen di bawah .C.

Contoh Ilustrasi

Pertimbangkan struktur HTML berikut :

<div class="C">
    <div class="B">
        <div class="A">Content</div>
        <div class="A">Content</div>
    </div>
</div>

Dalam senario ini:

• Elemen .A pertama akan menerima gaya yang digunakan oleh peraturan pertama.
• Elemen .A kedua, mengikut yang pertama, akan menerima gaya ganti yang digunakan oleh peraturan kedua.

Keserasian Pelayar

Pemilih ~ diiktiraf oleh IE7 dan ke atas, yang bermakna penyelesaian ini disokong secara meluas. Satu-satunya penyemak imbas utama yang gagal digunakan ialah IE6.

Dengan melaksanakan penyelesaian ini, pembangun boleh secara selektif menyasarkan dan menggayakan kejadian pertama elemen kelas tertentu, walaupun apabila struktur dan kiraan elemen dalam elemen induk berbeza-beza.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Kejadian Pertama Elemen Kelas Tertentu dalam Membeza-bezakan Struktur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!