Bagaimana untuk Memohon Warna Bergantian untuk Menyenaraikan Item dengan Kelas 'Ibu Bapa' Menggunakan Pemilih nth-child?

Pemilih Kanak-Kanak Kesembilan dengan Kelas: Mengatasi Menetapkan Semula Warna

Dalam percubaan untuk menggunakan warna berselang-seli untuk menyenaraikan item dengan kelas "ibu bapa" , anda mungkin menghadapi isu penetapan semula warna selepas elemen tidak sepadan tertentu. Isu ini timbul disebabkan oleh pengehadan pemilih :nth-child.

Walau bagaimanapun, penyelesaian wujud menggunakan gabungan adik beradik am (~). Dengan mentakrifkan peraturan untuk elemen mengikut peraturan yang tidak sepadan, anda boleh menogol warna untuk elemen padanan berikutnya. Begini caranya:

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

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

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

Dengan pendekatan ini, setiap elemen :not(.parent) berfungsi sebagai titik "set semula", menogol warna последующие соответствующие элементы. Walaupun ia mempunyai had dari segi sejauh mana ia boleh dilanjutkan, ia adalah anggaran yang paling hampir kepada warna berselang-seli menggunakan CSS tulen.

Atas ialah kandungan terperinci Bagaimana untuk Memohon Warna Bergantian untuk Menyenaraikan Item dengan Kelas 'Ibu Bapa' Menggunakan Pemilih nth-child?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!