Rumah >masalah biasa >Apa itu nth-child?

Apa itu nth-child?

zbt
zbtasal
2023-08-04 11:00:369397semak imbas

, Pemilih `anak ke-nth` menyediakan pembangun cara yang lebih tepat dan fleksibel untuk memilih dan menggayakan elemen. Dengan menggunakan pemilih `anak-anak` dengan betul, kami boleh memilih dan menggayakan pelbagai elemen dengan mudah dengan kedudukan tertentu, menjadikan reka bentuk halaman kami lebih kaya dan lebih pelbagai.

Apa itu nth-child?

Dalam pembangunan bahagian hadapan, pemilih CSS ialah peraturan sintaks untuk memilih elemen tertentu. Antara pemilih CSS, `anak-anak` ialah pemilih kelas pseudo yang biasa digunakan.

Pemilih `anak-anak ke-ke` membolehkan anda memilih elemen tertentu berdasarkan kedudukannya dalam elemen induk dan menapis elemen yang diperlukan berdasarkan peraturan tertentu. Ia memilih elemen dengan menggunakan formula matematik mudah, yang membolehkan pembangun memilih, mengawal dan menggayakan elemen dengan lebih tepat dalam kedudukan berbeza.

Sintaks pemilih `anak-anak` adalah seperti berikut:

:nth-child(an+b)

di mana `a` dan `b` adalah kedua-dua nilai integer dan mestilah integer positif.

`a` ialah nilai noktah, menunjukkan bilangan elemen setiap satu, manakala `b` mewakili kedudukan permulaan yang akan dipilih. Secara khusus, `an+b` bermaksud bahawa kedudukan elemen dalam elemen induk mematuhi Hanya peraturan `an+b` akan dipilih.

Berikut ialah beberapa contoh untuk membantu memahami senario aplikasi pemilih `anak-anak`:

1 `:anak-anak(ganjil)`: Pilih semua elemen pada kedudukan ganjil.

2. `:nth-child(even)`: Pilih semua elemen bernombor genap.

3. `:nth-child(3n)`: Pilih yang pertama daripada setiap 3 elemen.

4 `:nth-child(3n+1)`: Pilih elemen pertama antara setiap 3 elemen.

5 `:nth-child(2n+1)`: Pilih elemen pertama setiap 2 elemen.

Mari kita lihat contoh berikut untuk lebih memahami cara pemilih `anak-anak` berfungsi.

Andaikan terdapat senarai HTML (ul) yang mengandungi 9 elemen li, dan kami ingin memilih beberapa daripadanya untuk digayakan.

Elemen 1

Elemen 2

Elemen 3

Elemen 4

Elemen 5

Elemen 6

Elemen 7

Elemen 8

e. 3, 5, 7, dan 9 elemen):

li:nth-child(odd) {
background-color: yellow;
}

Kes 2: Pilih elemen pada kedudukan genap (iaitu, elemen ke-2, ke-4, ke-6 dan ke-8):

li:nth-child(even) {
background-color: green;
}

Kes 3: Pilih setiap 3 elemen Yang pertama elemen (iaitu, elemen ke-1, ke-4, dan ke-7):

li:nth-child(3n+1) {
color: red;
}

Melalui contoh ini, kita dapat melihat kuasa pemilih `anak-anak` ke-. Ia boleh memilih dan menggayakan elemen tertentu berdasarkan kedudukannya dalam elemen induk. Ini memberikan pereka dan pembangun dengan lebih banyak kebebasan kreatif dan kemungkinan kawalan.

Walau bagaimanapun, perlu diingatkan bahawa pemilih CSS mungkin mempunyai perbezaan keserasian dalam pelayar yang berbeza. Oleh itu, apabila menggunakan pemilih `anak-anak`, pembangun harus menguji dan melaraskan keserasian penyemak imbas yang berbeza untuk memastikan kod yang ditulis boleh berfungsi dengan betul dalam persekitaran yang berbeza.

Ringkasnya, pemilih `anak-anak ke-ke` menyediakan pembangun cara yang lebih tepat dan fleksibel untuk memilih dan menggayakan elemen. Dengan menggunakan pemilih `anak-anak` dengan betul, kami boleh memilih dan menggayakan pelbagai elemen dengan mudah dengan kedudukan tertentu, menjadikan reka bentuk halaman kami lebih kaya dan lebih pelbagai. .

Atas ialah kandungan terperinci Apa itu nth-child?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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 sebelumnya:Apakah kegunaan nth-child?Artikel seterusnya:Apakah kegunaan nth-child?