Rumah >hujung hadapan web >tutorial css >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!