Bagaimanakah Saya Boleh Menggayakan Elemen Ibu Bapa Berdasarkan Elemen Anak Mereka Menggunakan CSS?

Menggayakan Elemen Induk Berdasarkan Elemen Kanak-kanak

Adalah mungkin untuk menentukan gaya CSS untuk elemen yang digunakan berdasarkan kehadiran anak tertentu elemen. Ini dicapai menggunakan kelas pseudo :has().

Contoh

Pertimbangkan HTML berikut:

<div>
  <div class="a"></div>
</div>

<div>
  <div class="b"></div>
</div>

Untuk menggayakan div induk berdasarkan anak-anaknya, gunakan :has() pseudo-class:

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

Div pertama akan mempunyai sempadan merah kerana ia mengandungi div kanak-kanak dengan kelas "a". Div kedua akan mempunyai sempadan biru kerana ia mengandungi div kanak-kanak dengan kelas "b".

Nota: Sebelum kelas pseudo :has(), tingkah laku ini hanya boleh dicapai menggunakan JavaScript.

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