Bagaimana untuk Memilih Kejadian Pertama Elemen Kelas Dalam Bekas dalam CSS?

Pemilih CSS untuk Memilih Kejadian Pertama Elemen Kelas dalam Bekas Diberi

Apabila memilih elemen berdasarkan kelas, keperluan sering timbul untuk menyasarkan kejadian tertentu, seperti contoh pertama dalam bekas tertentu. Artikel ini membincangkan cara untuk mencapai ketepatan sedemikian.

Memahami Cabaran

Pertimbangkan senario di mana anda perlu menggayakan elemen pertama dengan kelas "A" yang terletak dalam elemen dengan ID "B" . Dengan mengandaikan "B" bukan anak kepada elemen "B" yang lain, anda pada mulanya mungkin cuba menggunakan gabungan ">" (pemilih kanak-kanak) dan ":first-child" (pseudo-class). Walau bagaimanapun, pendekatan ini gagal dalam kes di mana kedudukan elemen "A" pertama adalah dinamik atau tidak dapat diramalkan.

Mengatasi Had

CSS3 menawarkan pseudo- ":first-of-type" kelas, yang, seperti namanya, memilih elemen pertama bagi jenis tertentu dalam kalangan adik-beradiknya. Malangnya, tiada kelas pseudo ":first-of-class" terbina dalam untuk menyasarkan kejadian pertama kelas tertentu.

Untuk memintas pengehadan ini, kami boleh menggunakan penyelesaian menggunakan penggabung bersaudara am "~." Ini membolehkan kami memilih elemen berdasarkan hubungannya dengan elemen lain yang berkongsi induk yang sama. Dengan menggunakan "~", kami boleh menyasarkan semua elemen yang mengikuti elemen "A" pertama dalam bekas.

Melaksanakan Penyelesaian

Untuk melaksanakan penyelesaian ini, kami akan menggunakan dua peraturan CSS:

1. Peraturan 1: Menyasarkan semua elemen ".A" yang merupakan cucu kepada elemen ".C" (kontena induk yang diandaikan). Peraturan ini menggunakan gaya yang diingini pada elemen "A" pertama yang memenuhi kriteria ini.
2. Peraturan 2: Menyasarkan semua elemen ".A" yang mengikuti elemen pertama yang dipilih dalam Peraturan 1. Peraturan ini menggunakan "~" untuk memilih semua adik-beradik unsur "A" yang disasarkan, yang juga merupakan cucu kepada ".C." Sebarang pelarasan yang diperlukan pada gaya yang digunakan oleh Peraturan 1 boleh ditindih di sini.

Keserasian Pelayar

Adalah penting untuk ambil perhatian bahawa pemilih ~ adalah sebahagian daripada CSS3, yang diiktiraf oleh kebanyakan penyemak imbas utama, termasuk IE7 dan yang lebih baru.

Aplikasi Gaya Visualisasi

Untuk menggambarkan cara peraturan terpakai, mari kita pertimbangkan struktur HTML berikut:

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

Peraturan 1: Akan menggunakan gaya pada elemen [2], kerana ia adalah elemen "A" pertama dalam bekas ".B" masing-masing.

Peraturan 2: Akan digunakan gaya kepada elemen [3], kerana ia adalah elemen "A" yang mengikuti elemen yang dipilih sebelum ini ([2]).

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