Bagaimana untuk Menggunakan Gaya CSS pada Elemen Tertentu dengan Struktur Kanak-Kanak yang Pelbagai?

Menggayakan Berbilang Ibu Bapa dengan :nth-child

Isu:

Memastikan pemilih CSS mempengaruhi elemen tertentu merentas berbilang ibu bapa dengan struktur elemen kanak-kanak yang berbeza-beza boleh mencabar. Pertimbangkan contoh berikut:

<code class="html"><div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div></code>

Matlamatnya adalah untuk menggunakan gaya tertentu pada item senarai "satu" dan "tiga". Walau bagaimanapun, penggunaan pemilih :nth-child(1) dan :nth-child(3) menghasilkan penggayaan item senarai pertama dan ketiga dalam setiap elemen ul.

Penyelesaian:

Malangnya , pemilih CSS sahaja tidak boleh mengendalikan variasi sedemikian dalam struktur induk-anak. Pemilih :nth-child() dan sibling combinator terhad kepada memilih elemen dalam induk yang sama.

Pendekatan Ganti:

• JavaScript: Perpustakaan seperti jQuery boleh digunakan untuk menyasarkan elemen tertentu berdasarkan indeks atau kedudukannya dalam DOM.
• Pemarkahan Eksplisit: Menambah kelas atau ID pada elemen yang dikehendaki (satu dan tiga dalam kes ini) membolehkan untuk penyasaran tepat menggunakan pemilih CSS.

Contohnya, menambah kelas "dipilih" pada item senarai pertama dan ketiga dalam elemen .foo:

<code class="html"><div class="foo">
    <ul>
        <li class="selected">one</li>
        <li>two</li>
    </ul>
    <ul>
        <li class="selected">three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div></code>

CSS:

<code class="css">.foo li.selected {
    color: red;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Gaya CSS pada Elemen Tertentu dengan Struktur Kanak-Kanak yang Pelbagai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!