Mengapa Warna Bergantian Saya Ditetapkan Semula Apabila Menggunakan :nth-child(even/ganjil) dengan Kelas?

Susan Sarandon
Lepaskan: 2024-11-08 07:13:02
asal
1036 orang telah melayarinya

Why are My Alternating Colors Resetting When Using :nth-child(even/odd) with a Class?

:nth-child(even/ganjil) Selector with Class Issue

Anda menyasarkan untuk menggunakan warna berselang-seli untuk menyenaraikan item dengan "ibu bapa "kelas. Walau bagaimanapun, anda menghadapi masalah dengan penetapan semula warna. Untuk menyelesaikan masalah ini, pertimbangkan perkara berikut:

Penyelesaian:

Memandangkan peraturan CSS digunakan dari atas ke bawah, pemilih :nth-child(even/ganjil) akan berpotensi mengatasi tetapan warna sebelumnya. Untuk menangani perkara ini, gunakan penggabung bersaudara am (~) untuk menogol warna selepas elemen bukan "ibu bapa":

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

/* Alternate colors after non-.parent elements */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}
Salin selepas log masuk

Penjelasan:

  • dua peraturan pertama menetapkan warna berselang-seli untuk elemen "ibu bapa".
  • Peraturan seterusnya menggunakan penggabung ~ untuk menogol warna selepas elemen bukan "ibu bapa".
  • Setiap set peraturan menukar warna dengan meningkatkan kekhususan, memastikan tingkah laku yang diingini.

Keterbatasan:

Walaupun kaedah ini membolehkan anda mencapai warna berselang-seli untuk bilangan terhad bukan "ibu bapa" elemen, terdapat had untuk sejauh mana anda boleh melanjutkan pendekatan ini.

Atas ialah kandungan terperinci Mengapa Warna Bergantian Saya Ditetapkan Semula Apabila Menggunakan :nth-child(even/ganjil) dengan Kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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