Bagaimanakah Saya Boleh Memilih Setiap Elemen Nth Menggunakan Pemilih :nth-child() CSS?

Pilih Setiap Elemen Nth dengan CSS

Apabila berurusan dengan sekumpulan elemen, anda mungkin mahu menyasarkan setiap elemen ke-n. CSS menyediakan pemilih :nth-child() untuk memudahkan tugas ini.

:nth-child(n) membolehkan anda memilih elemen anak ke-nth dalam elemen induk. Adalah mungkin untuk menentukan nilai ke-n serta melaksanakan operasi aritmetik seperti penambahan, penolakan dan pendaraban pekali.

div:nth-child(4)

Pemilih ini akan memilih elemen div keempat. Walau bagaimanapun, ia memerlukan penulisan pemilih individu untuk setiap elemen ke-n.

:nth-child(an) memudahkan proses ini dengan ketara. 'a' mewakili pekali yang boleh digunakan pada 'n' menggunakan operasi aritmetik:

div:nth-child(4n)

Pemilih ini akan memilih setiap elemen div keempat, dengan berkesan menggantikan keperluan untuk berbilang pemilih.

Untuk kawalan yang lebih baik, ungkapan aritmetik boleh digunakan dalam pemilih:

• :anak-ke-nth(an b)
• :anak-ke-nth(an - b)
• :anak-ke-nth(a*n)

Contoh: Untuk memilih elemen div sahaja, tidak termasuk elemen lain seperti h1 atau p, gunakan :nth-of-type() dan bukannya :nth-child():

body div:nth-of-type(4n)

Nota: Jika n ditinggalkan, ia lalai kepada 1, memilih setiap elemen.

Perbezaan antara 4n dan 4n 4:

Sementara kedua-dua pemilih sepadan dengan setiap elemen div keempat, terdapat perbezaan halus pada titik permulaannya.

• :nth-child(4n) mula mengira dari 0, jadi ia memilih elemen pada kedudukan 4, 8, 12, dsb.
• :anak ke-1(4n 4) mula mengira dari 4, jadi ia memilih elemen pada kedudukan 4, 8, 12, dsb.

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