Bagaimana untuk Memilih Elemen Pertama dengan Kelas Khusus Dalam Struktur HTML yang Kompleks?

Cara Memilih Elemen Pertama Kelas Diberi

Apabila bekerja dengan elemen HTML, memilih elemen khusus untuk penggayaan atau manipulasi adalah penting. Satu senario melibatkan penyasaran kejadian pertama kelas dalam elemen lain, mengemukakan cabaran apabila kedudukan kelas yang diingini berbeza dalam elemen yang berbeza.

Dalam konteks ini, kami menyasarkan untuk memilih elemen pertama dengan kelas ' A' dalam elemen yang dikenal pasti oleh id atau kelas 'B'. Masalah timbul apabila 'B' mungkin berbeza dalam kedua-dua nama dan struktur, dan elemen 'A' tidak konsisten dalam kedudukannya dalam 'B'. Walau bagaimanapun, satu faktor yang konsisten kekal: kehadiran elemen luar 'C'.

Penyelesaian: Menggunakan Pemilih Adik Beradik

CSS3 memperkenalkan kelas pseudo :first-of-type, yang memilih unsur pertama jenisnya di kalangan adik-beradik. Malangnya, CSS kekurangan :first-of-class pseudo-class. Oleh itu, kami memerlukan penyelesaian alternatif.

Satu pendekatan melibatkan penggunaan gabungan adik beradik am (~) bersama-sama dengan gaya utama untuk mencapai matlamat kami. Teknik ini memanfaatkan fakta bahawa CSS menggunakan gaya secara atas ke bawah. Dengan mentakrifkan dua peraturan, kami boleh mengatasi penggayaan lalai unsur '.A' yang tidak sepadan dengan kriteria yang kami kehendaki:

.C > * > .A {
  /* Styles for all '.A' elements that are grandchildren of '.C' */
}

.C > * > .A ~ .A {
  /* Styles for '.A' elements that follow the first '.A' child of any element that is a child of '.C' */
}

Dalam peraturan ini, yang pertama menyasarkan semua '.A' cucu '. C'. Memandangkan ini termasuk kejadian pertama yang kita inginkan, kita perlu "buat asal" penggayaan ini untuk elemen '.A' berikutnya menggunakan peraturan kedua. Ini dicapai dengan menggunakan ~ combinator untuk memilih elemen '.A' sahaja yang mengikuti elemen '.A' yang lain di bawah induk yang sama.

Cara Gaya Digunakan

Untuk menggambarkan bagaimana ini teknik berfungsi, pertimbangkan struktur HTML berikut:

<div class="C">
  <div class="B">
    <div class="E">Content <!-- [1] --></div>
    <div class="F">Content <!-- [1] --></div>
    <div class="A">Content <!-- [2] --></div>
    <div class="A">Content <!-- [3] --></div>
  </div>
  <!-- ... other elements ... -->
</div>

Di sini, '[1]' mewakili elemen yang tidak memenuhi kriteria kami, manakala '[2]' dan '[3]' mewakili yang pertama dan mana-mana elemen '.A' berikutnya yang kami mahu gayakan secara berbeza.

1. Peraturan pertama menggayakan semua elemen '.A' yang merupakan cucu kepada '.C'. Ini termasuk elemen '[2]' dan '[3]'.
2. Peraturan kedua menyasarkan mana-mana elemen '.A' yang mengikuti elemen '.A' lain di bawah induk yang sama. Ini termasuk elemen '[3]' tetapi bukan '[2]' kerana ia tidak mempunyai adik beradik terdahulu dengan kelas '.A'.

Akibatnya, elemen '[2]' (yang pertama '.A') mengekalkan penggayaan lalai, manakala elemen '[3]' mempunyai penggayaan yang ditindih oleh peraturan kedua. Oleh itu, kami berjaya menyasarkan dan menggayakan kejadian pertama kelas '.A' dalam konteks elemen '.C'.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Elemen Pertama dengan Kelas Khusus Dalam Struktur HTML yang Kompleks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!