Bagaimanakah Saya Boleh Menggayakan Elemen Induk Berdasarkan Elemen Anaknya Menggunakan 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

elemen dengan kelas "sub," anda boleh menggunakan CSS berikut:

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

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>

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

• elemen di bawah
  dengan kelas "utama" yang mempunyai anak
  elemen dengan kelas "sub":

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

  Nota: Pemilih has() tidak disokong oleh semua penyemak imbas. Jika anda memerlukan sokongan penyemak imbas yang lebih luas, anda boleh mempertimbangkan untuk menggunakan penyelesaian JavaScript.

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