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

Elemen Sasaran Berdasarkan Kandungan Kanak-kanak dengan CSS

Anda mungkin menghadapi keperluan untuk menggunakan gaya CSS unik pada elemen induk berdasarkan elemen anak mereka mengandungi. Walaupun pemilih CSS tradisional menumpukan pada menyasarkan elemen tertentu, terdapat cara untuk mencapai penggayaan bersyarat menggunakan pemilih :has().

Sintaks untuk :has() adalah seperti berikut:

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

Dengan sintaks ini, anda boleh menggunakan gaya pada elemen div yang mengandungi elemen anak tertentu. Sebagai contoh, peraturan di atas akan menambah sempadan merah pada elemen div yang mengandungi kanak-kanak dengan kelas "a" dan sempadan biru kepada elemen div yang mengandungi kanak-kanak dengan kelas "b".

Contoh :

<style>
  div:has(div.a) {
    border: solid 3px red;
  }
  div:has(div.b) {
    border: solid 3px blue;
  }
</style>
<div>
  <div class="a"></div>
</div>

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

Kod ini akan menghasilkan dua elemen div, satu dengan sempadan merah dan satu dengan sempadan biru, sepadan dengan elemen kanak-kanak mereka mengandungi.

Nota: Pemilih :has() disokong secara meluas dalam penyemak imbas moden tetapi mungkin tidak berfungsi dalam penyemak imbas lama.

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