Bagaimana Mengganti Warna Latar Belakang untuk Item Senarai '.parent' Dengan Elemen Bukan-'.parent' Intervening?

Menggunakan Pemilih :nth-child(even/ganjil) dengan Kelas:

Anda mahu menggunakan warna latar belakang berselang-seli untuk menyenaraikan item dengan kelas ".ibu bapa". Walau bagaimanapun, warna pada masa ini ditetapkan semula.

Masalah:
Elemen ".parent" tidak berkelakuan seperti yang diharapkan kerana kehadiran elemen bukan-".parent" dalam senarai .

Penyelesaian:
Biasanya, tingkah laku yang diingini tidak boleh dicapai hanya menggunakan pemilih :nth-child. Walau bagaimanapun, anda boleh menggunakan penggabung bersaudara am (~):

1. Pilih semua elemen ".ibu bapa" ganjil dan gunakan warna "hijau".
2. Untuk setiap bukan-". elemen induk", togol warna unsur ".induk" berikut menggunakan ~.

Kod CSS:

.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 menggantikan warna untuk bilangan terhad unsur bukan-".ibu bapa" yang "dikecualikan", mencapai corak berselang-seli yang diingini.

Atas ialah kandungan terperinci Bagaimana Mengganti Warna Latar Belakang untuk Item Senarai '.parent' Dengan Elemen Bukan-'.parent' Intervening?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!