Bagaimana untuk Menggayakan Elemen Induk Berdasarkan Elemen Anaknya dengan CSS?-tutorial css-php.cn

Bagaimana untuk Menggayakan Elemen Induk Berdasarkan Elemen Anaknya dengan CSS?

Barbara Streisand

Lepaskan： 2024-11-28 17:45:17

asal

805 orang telah melayarinya

How to Style a Parent Element Based on its Child Elements with 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>

Salin selepas log masuk

Untuk menggayakan dalam CSS

unsur yang mempunyai anak

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

Salin selepas log masuk

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!