Apa itu nth-child?

, 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.

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!