Bolehkah CSS Pseudo-class Gaya Item Senarai Genap dan Ganjil?

Menggayakan Elemen Genap dan Ganjil Menggunakan CSS Pseudo-Classes

Soalan:

Bolehkah CSS kelas pseudo digunakan untuk memilih dan menggayakan elemen genap dan ganjil dalam senarai? Senarai dengan warna berselang-seli ialah hasil yang dimaksudkan, tetapi senarai dengan item biru sahaja sedang dijana.

Contoh:

Kod berikut dijangka menghasilkan senarai dengan item berwarna hijau dan merah berselang-seli, tetapi sebaliknya, semua item adalah biru.

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>

Jawapan:

Untuk menggayakan unsur genap dan ganjil dengan betul, kelas pseudo anak :nth-child harus digunakan dan bukannya : ganjil dan :genap:

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>

Demo: [JSfiddle](http://jsfiddle.net/thirtydot/K3TuN/1323/)

Atas ialah kandungan terperinci Bolehkah CSS Pseudo-class Gaya Item Senarai Genap dan Ganjil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!