: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:
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!