Bagaimanakah Saya Boleh Menggayakan Item Senarai Genap dan Ganjil Dengan Betul Menggunakan CSS?

Menggayakan Elemen Genap dan Ganjil Menggunakan CSS

Kelas pseudo CSS ialah alat yang berkuasa untuk memilih dan menggayakan elemen HTML berdasarkan kedudukan atau keadaannya. Satu kes penggunaan biasa ialah menyelang-seli kemunculan elemen dalam senarai.

Pada mulanya, kod berikut mungkin kelihatan seperti cara mudah untuk membuat senarai warna berselang-seli:

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

Walau bagaimanapun, ini akan menyebabkan semua item senarai menjadi biru. Ini kerana apabila pengisytiharan gaya digunakan pada kedua-dua elemen dan kelas pseudonya, yang terakhir sentiasa diutamakan. Dalam kes ini, li { color: blue } mengatasi li:odd { color:green } dan li:even { color:red }.

Untuk menukar warna dengan betul, kita perlu menggunakan nth-child() pseudo-class:

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

nth-child pseudo-class memilih elemen berdasarkan kedudukannya dalam bekas induknya, membolehkan kami menyasarkan elemen genap dan ganjil secara khusus.

Berikut ialah pratonton langsung:

[Coretan Kod]

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Item Senarai Genap dan Ganjil Dengan Betul Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!