Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memohon Warna Bergantian untuk Menyenaraikan Item dengan Kelas 'Ibu Bapa' Menggunakan Pemilih nth-child?

Bagaimana untuk Memohon Warna Bergantian untuk Menyenaraikan Item dengan Kelas 'Ibu Bapa' Menggunakan Pemilih nth-child?

Linda Hamilton
Lepaskan: 2024-11-09 04:21:02
asal
998 orang telah melayarinya

How to Apply Alternating Colors to List Items with the

Pemilih Kanak-Kanak Kesembilan dengan Kelas: Mengatasi Menetapkan Semula Warna

Dalam percubaan untuk menggunakan warna berselang-seli untuk menyenaraikan item dengan kelas "ibu bapa" , anda mungkin menghadapi isu penetapan semula warna selepas elemen tidak sepadan tertentu. Isu ini timbul disebabkan oleh pengehadan pemilih :nth-child.

Walau bagaimanapun, penyelesaian wujud menggunakan gabungan adik beradik am (~). Dengan mentakrifkan peraturan untuk elemen mengikut peraturan yang tidak sepadan, anda boleh menogol warna untuk elemen padanan berikutnya. Begini caranya:

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

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

/* Toggle colors again after second non-parent element */
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

Dengan pendekatan ini, setiap elemen :not(.parent) berfungsi sebagai titik "set semula", menogol warna последующие соответствующие элементы. Walaupun ia mempunyai had dari segi sejauh mana ia boleh dilanjutkan, ia adalah anggaran yang paling hampir kepada warna berselang-seli menggunakan CSS tulen.

Atas ialah kandungan terperinci Bagaimana untuk Memohon Warna Bergantian untuk Menyenaraikan Item dengan Kelas 'Ibu Bapa' Menggunakan Pemilih nth-child?. 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