Mengapa Warna Bergantian Saya Ditetapkan Semula Apabila Menggunakan :nth-child(even/ganjil) dengan Kelas?

:nth-child(even/ganjil) Selector with Class Issue

Anda menyasarkan untuk menggunakan warna berselang-seli untuk menyenaraikan item dengan "ibu bapa "kelas. Walau bagaimanapun, anda menghadapi masalah dengan penetapan semula warna. Untuk menyelesaikan masalah ini, pertimbangkan perkara berikut:

Penyelesaian:

Memandangkan peraturan CSS digunakan dari atas ke bawah, pemilih :nth-child(even/ganjil) akan berpotensi mengatasi tetapan warna sebelumnya. Untuk menangani perkara ini, gunakan penggabung bersaudara am (~) untuk menogol warna selepas elemen bukan "ibu bapa":

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* Alternate colors after non-.parent elements */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

Penjelasan:

• dua peraturan pertama menetapkan warna berselang-seli untuk elemen "ibu bapa".
• Peraturan seterusnya menggunakan penggabung ~ untuk menogol warna selepas elemen bukan "ibu bapa".
• Setiap set peraturan menukar warna dengan meningkatkan kekhususan, memastikan tingkah laku yang diingini.

Keterbatasan:

Walaupun kaedah ini membolehkan anda mencapai warna berselang-seli untuk bilangan terhad bukan "ibu bapa" elemen, terdapat had untuk sejauh mana anda boleh melanjutkan pendekatan ini.

Atas ialah kandungan terperinci Mengapa Warna Bergantian Saya Ditetapkan Semula Apabila Menggunakan :nth-child(even/ganjil) dengan Kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!