Bagaimanakah Saya Boleh Menggayakan Elemen Induk Berdasarkan Elemen Anaknya Menggunakan CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Menggayakan Elemen Induk Berdasarkan Elemen Anaknya Menggunakan CSS?

Linda Hamilton

Lepaskan： 2024-11-24 06:08:18

asal

900 orang telah melayarinya

How Can I Style a Parent Element Based on its Child Elements Using CSS?

Gunakan Gaya kepada Ibu Bapa jika Ia Mempunyai Anak Menggunakan CSS

Sebagai pembangun web, anda mungkin menghadapi situasi di mana anda perlu menggunakan gaya untuk unsur induk berdasarkan kehadiran unsur anak tertentu. Walaupun ini mungkin kelihatan seperti tugas yang mudah, mencapainya semata-mata dengan CSS boleh menjadi satu cabaran.

Nasib baik, CSS menyediakan pemilih yang boleh membantu anda mencapai perkara ini:

mempunyai() Selector :

Pemilih has() membenarkan anda memilih elemen yang mengandungi elemen anak tertentu. Contohnya, untuk menggunakan gaya pada ibu bapa

elemen jika ia mempunyai anak

ul li:has(ul.sub) {
  /* Your styles here */
}

Salin selepas log masuk

Contoh:

Pertimbangkan struktur HTML berikut:

<ul class="main">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul class="sub">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
      <li>Sub Item 3</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Salin selepas log masuk

Menggunakan pemilih has(), anda boleh menggunakan latar belakang biru pada semua

elemen di bawah