Bagaimana untuk Menggayakan Semua Tetapi Elemen Anak Pertama dalam Pemilih CSS Bersarang?

Bekerja dengan Pemilih Bersarang: Menggunakan not:first-child

Memilih elemen tertentu dalam struktur bersarang boleh menjadi cabaran dalam CSS. Apabila anda menghadapi senario di mana anda perlu menggunakan gaya pada semua kecuali elemen pertama dalam kumpulan, pemilih not:first-child mula dimainkan.

Satu pendekatan yang anda cuba, div ul:not:first- anak, malangnya tidak berfungsi. Ini kerana pemilih not:first-child menjangkakan pemilih mudah sebagai hujahnya, yang bermaksud div ul tidak sah dalam konteks ini.

Sintaxis yang betul untuk not:first-child selector ialah:

div ul:not(:first-child) {
    background-color: #900;
}

Pemilih ini menyasarkan mana-mana elemen ul yang bukan anak pertama induknya div.

Walau bagaimanapun, untuk sokongan penyemak imbas lama atau untuk mengatasi had pemilih :not, teknik alternatif boleh digunakan:

1. Tentukan peraturan dengan skop yang lebih luas daripada yang dimaksudkan , memberikan gaya yang diingini kepada semua elemen.
2. Buat peraturan yang lebih khusus dengan yang lebih sempit skop.
3. Dalam peraturan yang lebih sempit, tetapkan semula sifat gaya kepada nilai lalainya untuk elemen yang memenuhi syarat tertentu, seperti menjadi anak pertama.

Sebagai contoh, dalam ini coretan kod, kami menggunakan warna latar belakang pada semua elemen ul, tetapi peraturan kedua mengatasi gaya untuk elemen anak pertama:

div ul {
    background-color: #900;
}

div ul:first-child {
    background-color: transparent;
}

Oleh menggunakan sama ada bukan:pemilih anak pertama atau teknik alternatif, anda boleh menyasarkan dan menggayakan elemen bersarang dengan berkesan tanpa menjejaskan anak pertama.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Semua Tetapi Elemen Anak Pertama dalam Pemilih CSS Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!