Bolehkah saya Menggayakan Elemen Induk Berdasarkan Elemen Anaknya dalam CSS?

Menggayakan Elemen Berdasarkan Elemen Kanak-kanak dalam CSS

Adakah mungkin untuk menggunakan gaya CSS pada elemen berdasarkan elemen kanak-kanak yang terkandung di dalamnya?

Ya, CSS menyediakan cara untuk mencapai ini menggunakan :has() kelas pseudo. Ia membolehkan anda menyasarkan elemen berdasarkan sama ada ia mengandungi unsur turunan yang ditentukan.

Sintaks:

div:has(child-selector) {
  /* CSS styles for elements containing the child */
}

Contoh:

Untuk memberikan elemen div sempadan merah jika ia mengandungi div kanak-kanak dengan kelas "a":

div:has(div.a) {
  border: solid 3px red;
}

Nota: Kelas pseudo :has() disokong dalam pelayar moden tetapi tidak dalam pelayar lama seperti Internet Explorer.

Alternatif Menggunakan JavaScript (jQuery):

Jika anda memerlukan keserasian dengan pelayar lama, anda boleh menggunakan JavaScript dengan pemilih :has() jQuery:

$('div:has(div.a)').css('border', '1px solid red');

Atas ialah kandungan terperinci Bolehkah saya Menggayakan Elemen Induk Berdasarkan Elemen Anaknya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!