Bagaimana untuk Togol Warna dengan Pemilih :nth-child(even/ganjil) Apabila Unsur Bukan Induk Wujud?

Pemilih anak ke-nth(genap/ganjil) dengan Isu Kelas

Apabila melaksanakan pemilih :nth-child(ganjil/genap) untuk senarai berasaskan kelas, adalah perkara biasa untuk menghadapi isu penetapan semula warna. Dalam contoh yang diberikan, elemen bertujuan untuk mewarisi warna teks, tetapi sebaliknya ia ditetapkan semula.

Isu ini timbul kerana:nth-child(even/ganjil) secara semula jadi menyasarkan semua elemen anak, tanpa mengira kelas atau atribut lain. Untuk menangani masalah ini, ~ general sibling combinator boleh digunakan.

Konsep ini melibatkan togol warna unsur .induk berikutnya selepas menemui unsur bukan induk. Berikut ialah pecahan CSS:

/* Initial even/odd coloring */
.parent:nth-child(odd) {
    background-color: green;
}

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

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

li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* Toggle colors after second non-.parent */
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;
}

Penyelesaian ini membenarkan togol antara warna walaupun apabila unsur bukan induk hadir. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pendekatan ini mempunyai had dan hanya boleh digunakan untuk bilangan elemen yang dikecualikan yang terhad.

Dengan melaksanakan strategi ini, anda boleh menggunakan pemilih :nth-child(ganjil/genap) dengan berkesan untuk senarai berasaskan kelas dan mencapai skema warna berselang-seli yang diingini, memastikan item senarai mewarisi warna kandungan teksnya.

Atas ialah kandungan terperinci Bagaimana untuk Togol Warna dengan Pemilih :nth-child(even/ganjil) Apabila Unsur Bukan Induk Wujud?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!