Bagaimanakah Saya Boleh Menggayakan Elemen Induk Berdasarkan Kehadiran Elemen Anak dalam CSS?

Gunakan Gaya kepada Ibu Bapa Berdasarkan Kehadiran Anak Menggunakan CSS

Apabila bekerja dengan elemen bersarang, adalah wajar untuk menggunakan gaya kepada ibu bapa berdasarkan sama ada ia mengandungi unsur kanak-kanak. CSS menyediakan penyelesaian terhad untuk tujuan ini.

Menggunakan Pemilih ':has()'

Pemilih :has() boleh digunakan untuk memilih elemen yang mengandungi elemen kanak-kanak tertentu. Contohnya, untuk menggunakan penggayaan pada elemen li induk jika ia mengandungi anak ul.sub:

ul li:has(ul.sub) {
    background-color: green;
}

Had

Malangnya, pemilih :has() hanya disokong dalam CSS4 dan tidak diterima pakai secara meluas oleh penyemak imbas.

Alternatif dengan JavaScript

Sebagai alternatif, anda boleh mencapai kesan yang diingini menggunakan JavaScript:

$('ul li:has(ul.sub)').addClass('has_sub');

Kemudian, tambahkan penggayaan untuk kelas li.has_sub dalam CSS anda.

Nota:

Bahagian coretan dalam jawapan asal yang dicadangkan menggunakan pemilih $, yang merupakan cadangan CSS4 tetapi tidak disokong oleh mana-mana penyemak imbas pada masa ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Elemen Induk Berdasarkan Kehadiran Elemen Anak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!