Bagaimana untuk Menggayakan Elemen Induk Berdasarkan Elemen Anaknya dengan CSS?

Cara Menggunakan Gaya pada Elemen Induk jika ia Mempunyai Anak dengan CSS

Dalam pembangunan web, selalunya perlu untuk menggunakan penggayaan khusus pada elemen berdasarkan hubungannya dengan elemen lain dalam DOM. Satu cabaran khusus ialah menggayakan elemen induk jika ia mengandungi elemen anak.

Pertimbangkan struktur HTML berikut:

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

Untuk menggayakan dalam CSS

unsur yang mempunyai anak

elemen, anda boleh menggunakan pemilih :has():

ul li:has(ul.sub) {
    background-color: yellow;
    border: 1px solid black;
}

Dengan menggunakan warna latar belakang dan sifat sempadan pada elemen li yang memenuhi syarat :has(ul.sub), anda boleh membezakannya daripada elemen li yang tidak mempunyai sebarang elemen ul.sub anak.

Adalah penting untuk ambil perhatian bahawa pemilih :has() tidak disokong dalam semua penyemak imbas, jadi menggunakan pendekatan ini mungkin memerlukan penyemak imbas pertimbangan keserasian.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen Induk Berdasarkan Elemen Anaknya dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!