Cara Menggayakan Kanak-Kanak Tertentu Merentas Berbilang Ibu Bapa dalam CSS

Menggayakan Kanak-Kanak Ke-n Tertentu Merentas Berbilang Ibu Bapa

Apabila menggayakan elemen bersarang menggunakan pemilih anak ke-n, adalah penting untuk ambil perhatian bahawa pemilih beroperasi dalam konteks induk tunggal. Ini boleh membawa kepada cabaran apabila menyasarkan elemen kanak-kanak tertentu merentas berbilang ibu bapa.

Isunya:

Pertimbangkan markup berikut:

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

The matlamatnya adalah untuk menggayakan elemen li pertama dan ketiga dalam .foo. Menggunakan CSS berikut:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

Pendekatan ini tidak akan berfungsi kerana anak ke-n memilih anak pertama dan ketiga setiap ul.

Penyelesaian:

Menggunakan CSS sahaja, tidak mungkin untuk menyasarkan anak ke-nth merentas berbilang ibu bapa. Walau bagaimanapun, terdapat penyelesaian alternatif:

• JavaScript: Perpustakaan seperti jQuery memudahkan untuk memanipulasi elemen DOM dan memilih yang khusus, seperti $('.foo li:eq( 0), .foo li:eq(2)').
• Penanda Eksplisit: Tambahkan kelas atau ID pada elemen li pertama dan ketiga secara eksplisit, seperti:

<div class="foo">
    <ul>
        <li class="first">one</li>
        <li>two</li>
    </ul>
    <ul>
        <li class="third">three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

Kemudian, gayakannya menggunakan kelas yang baru ditambah:

.foo li.first,
.foo li.third
{
    color: red;
}

Atas ialah kandungan terperinci Cara Menggayakan Kanak-Kanak Tertentu Merentas Berbilang Ibu Bapa dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!