Bagaimanakah Saya Boleh Menyasarkan Secara Selektif Setiap Elemen Nth dalam CSS Menggunakan `:nth-child()`?

Cara Selektif Menyasarkan Setiap Elemen Nth Menggunakan CSS

Memahami Isu

Selalunya, pembangun web menghadapi keperluan untuk memilih elemen tertentu dalam set , seperti menyasarkan setiap elemen keempat. Secara tradisinya, ini memerlukan mentakrifkan setiap elemen secara manual, tugas yang memakan masa dan berulang untuk set yang lebih besar.

Memperkenalkan Pemilih Nth-Child()

Untuk mengatasi cabaran ini, CSS menyediakan ke-n- pemilih kanak-kanak (). Alat berkuasa ini membolehkan anda memilih elemen berdasarkan kedudukannya berbanding dengan adik-beradik mereka. Seperti namanya, ia memerlukan parameter berangka n dan membina ungkapan aritmetik menggunakannya.

Memudahkan Pemilihan Elemen N

Pemilih nth-child() menawarkan penyelesaian mudah untuk memilih setiap nth unsur. Hanya tulis div:nth-child(4n), gantikan div dengan jenis elemen yang anda inginkan. Ini akan memilih elemen pada kedudukan 4, 8, 12 dan seterusnya.

Menggunakan Ungkapan Aritmetik

Melebihi pendaraban mudah dengan n, anak ke-n() menyokong penambahan ( ), penolakan (- ), dan pendaraban pekali (an, dengan a ialah integer). Ini membolehkan ungkapan kompleks seperti :nth-child(4n 4), yang mengalihkan pemilihan lebih jauh di sepanjang jujukan (cth., memilih elemen pada 4, 8, 12, 16, dsb.).

Batasan dan Alternatif

Perhatikan bahawa nth-child() bergantung pada ketekalan jenis elemen dalam induk. Jika jenis elemen berbeza hadir, gunakan :nth-of-type() sebaliknya.

Untuk kriteria pemilihan yang lebih kompleks (melibatkan kelas atau atribut), pemilih CSS tulen mungkin tidak mencukupi. Pertimbangkan untuk menggunakan JavaScript atau prapemproses CSS dalam kes sedemikian.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyasarkan Secara Selektif Setiap Elemen Nth dalam CSS Menggunakan `:nth-child()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!