Rumah > hujung hadapan web > tutorial css > Bagaimana Mengganti Warna Latar Belakang untuk Item Senarai '.parent' Dengan Elemen Bukan-'.parent' Intervening?

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

Mary-Kate Olsen
Lepaskan: 2024-11-06 22:59:03
asal
872 orang telah melayarinya

How to Alternate Background Colors for

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;
}
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan