Bagaimanakah Saya Boleh Menggayakan Elemen Induk Berdasarkan Kewujudan Elemen Anak Tertentu dalam CSS?

Gunakan Gaya kepada Ibu Bapa jika ia Mempunyai Anak dengan CSS

Dalam CSS, menggayakan elemen induk berdasarkan kewujudan elemen anak boleh dicapai menggunakan pemilih has().

Untuk menggunakan gaya pada induk apabila ia mengandungi anak dengan kelas "sub", gunakan CSS berikut peraturan:

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

Sebagai contoh, jika anda mempunyai HTML berikut:

<ul class="main">
  <li>Parent 1</li>
  <li>Parent 2</li>
  <li>Parent 3 with Child
    <ul class="sub">
      <li>Child of Parent 3</li>
    </ul>
  </li>
  <li>Parent 4</li>
</ul>

Dan CSS berikut:

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

Output akan menunjukkan "Ibu bapa 3 with Child" dalam warna biru muda, menunjukkan bahawa ibu bapa (li) mempunyai anak dengan kelas "sub."

Perhatikan bahawa pemilih $ yang disebut dalam jawapan cadangan soalan masih belum diseragamkan dalam CSS4. Sebaliknya, pemilih has() ialah cara yang disokong untuk mencapai fungsi ini.

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