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

Gaya CSS untuk Ibu Bapa dengan Elemen Kanak-kanak

Dalam pembangunan web, mungkin perlu untuk menggunakan gaya pada elemen induk berdasarkan sama ada ia mengandungi elemen kanak-kanak. Menggunakan CSS semata-mata, ini boleh dicapai melalui pemilih has().

ul li:has(ul.sub) {
    /* Styles for parent li elements with child ul elements with class "sub" */
}

Di sini, pemilih has() digunakan untuk menyasarkan elemen induk li (yang dalam ul elemen) yang mempunyai anak elemen ul dengan kelas "sub". Elemen induk li tersebut kemudiannya boleh digayakan dengan sewajarnya.

Contoh HTML:

<ul class="main">
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa
        <ul class="sub">
            <li>bbbb</li>
            <li>bbbb
                <ul>
                    <li>cccc</li>
                    <li>cccc</li>
                    <li>cccc</li>
                </ul>
            </li>
            <li>bbbb</li>
            <li>bbbb</li>
            <li>bbbb</li>
        </ul>
    </li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
</ul>

Contoh CSS:

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

Dengan CSS ini, semua elemen induk li dalam senarai utama yang mengandungi subsenarai akan mempunyai latar belakang biru muda warna.

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