Bolehkah kelas Pseudo CSS Menggayakan Item Senarai Genap dan Ganjil dengan Betul?

Menggayakan Elemen Genap dan Ganjil menggunakan Kelas Pseudo CSS

Bolehkah kelas pseudo CSS digunakan untuk membezakan penggayaan senarai genap dan ganjil item?

Yang Dijangkakan Hasil:

Senarai dengan warna berselang-seli, seperti yang dilihat dalam coretan kod berikut:

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

Hasil Sebenar:

Daripada warna berselang-seli, semua item senarai akhirnya menjadi biru.

The Penyelesaian:

Untuk berjaya menggayakan elemen genap dan ganjil, disyorkan untuk menggunakan kelas pseudo anak ke-n, seperti yang ditunjukkan di bawah:

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

Penyelesaian ini menangani warna berselang-seli keperluan dengan berkesan, seperti yang dipamerkan dalam coretan kod berikut:

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

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