Bagaimana Mengganti Warna Elemen dengan :nth-child Apabila Melangkau Unsur Tidak Padan?

:nth-child(genap/ganjil) Pemilih dengan Kelas

Dalam CSS, pemilih :nth-child(n) memilih elemen iaitu anak ke-1 ibu bapa mereka. Apabila n adalah ganjil, pemilih anak ke-n(ganjil) memilih elemen bernombor ganjil dan apabila n ialah genap, pemilih anak ke-n(genap) memilih elemen bernombor genap.

Pertimbangkan penanda HTML berikut , di mana kami ingin menggunakan pemilih :nth-child untuk menyenaraikan item dengan kelas "ibu bapa":

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

Menggunakan CSS berikut pada HTML di atas:

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

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

Tanpa diduga, warna unsur ditetapkan semula selepas unsur bukan induk pertama. Ini kerana pemilih :nth-child terpakai pada semua elemen dalam senarai, bukan hanya elemen yang mempunyai kelas "ibu bapa".

Untuk mencapai gelagat yang diingini, kita perlu menggunakan gabungan adik beradik am (~) , yang memilih elemen yang mendahului elemen lain dalam pepohon DOM. Dengan menggabungkan ini dengan pemilih :nth-child, kita boleh menukar warna unsur ".parent" setiap kali elemen bukan.parent ditemui:

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

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

/* after the second non-.parent, toggle again */
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;
}

Pendekatan ini membolehkan kita menukar warna daripada unsur ".induk" sambil melangkau unsur bukan.induk. Walau bagaimanapun, bilangan elemen bukan ibu bapa yang boleh dilihat oleh pemilih :nth-child ke hadapan adalah terhad, jadi teknik ini mungkin tidak praktikal untuk senarai yang sangat panjang dengan banyak kelas berselang-seli.

Atas ialah kandungan terperinci Bagaimana Mengganti Warna Elemen dengan :nth-child Apabila Melangkau Unsur Tidak Padan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!