Mengapa CSS Saya :odd dan :even Pemilih Tidak Berfungsi Seperti Yang Dijangkakan?

Menggayakan Elemen Genap dan Ganjil

Kelas pseudo CSS :ganjil dan :even membolehkan anda menggunakan gaya pada kejadian ganjil dan genap bagi elemen dalam senarai. Walau bagaimanapun, isu timbul apabila menggunakan kelas pseudo ini bersama dengan peraturan penggayaan asas, yang membawa kepada hasil yang tidak dijangka.

Sebagai contoh, pertimbangkan kod CSS dan HTML berikut:

li { color: blue }
li:odd { color:green }
li:even { color:red }

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

Anda mungkin menjangkakan ini akan menghasilkan senarai warna berselang-seli, tetapi sebaliknya, semua item senarai adalah biru.

Penyelesaian

Untuk menyelesaikannya, anda boleh menggunakan kelas pseudo anak ke-n dan bukannya :ganjil dan :genap. Sintaks untuk nth-child adalah seperti berikut:

li:nth-child(n) {...}

di mana n mewakili kedudukan elemen dalam induknya.

Untuk menggayakan item senarai ganjil dan genap, anda boleh menggunakan yang berikut CSS:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

Ini akan menghasilkan senarai item senarai hitam, dengan setiap item lain berselang seli antara kelabu (#777) dan biru.

Atas ialah kandungan terperinci Mengapa CSS Saya :odd dan :even Pemilih Tidak Berfungsi Seperti Yang Dijangkakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!