Genap lwn. Penggayaan Item Senarai Ganjil dalam CSS: `li:odd`/`:even` atau `:nth-child()`?

Menggayakan Elemen Senarai Genap dan Ganjil: Pseudo-Classes vs. nth-child

Apabila cuba mencapai warna berselang-seli untuk item senarai menggunakan kelas pseudo CSS, anda boleh menghadapi masalah. Walaupun nampaknya logik untuk menggunakan li:odd dan li:even untuk tujuan ini, tingkah laku itu mungkin tidak dapat diramalkan.

Untuk menggayakan contoh item senarai genap dan ganjil dengan berkesan, pertimbangkan untuk menggunakan pendekatan berikut:

Sebaliknya daripada:

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

Gunakan:

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

Dengan menggantikan :ganjil dan :even dengan :nth-child(ganjil) dan :nth- kanak-kanak(malah), kesan pewarnaan berselang-seli yang diingini tercapai. Ini kerana :nth-child membenarkan anda memilih elemen berdasarkan kedudukannya dalam senarai, memastikan gaya yang betul digunakan pada setiap item.

Atas ialah kandungan terperinci Genap lwn. Penggayaan Item Senarai Ganjil dalam CSS: `li:odd`/`:even` atau `:nth-child()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!