Bagaimanakah Saya Boleh Memilih Setiap Elemen Nth dengan Cekap dalam CSS Menggunakan `nth-child()`?

Memilih Setiap Elemen Nth dalam CSS

Pemilih nth-child() dalam CSS menyediakan cara yang mudah untuk menyasarkan elemen anak tertentu dalam mereka unsur induk. Walau bagaimanapun, ia boleh menjadi rumit untuk menyenaraikan setiap anak ke-1 secara individu. Adakah terdapat kaedah yang lebih cekap?

Menggunakan Ungkapan Aritmetik dalam nth-child()

Kuasa sebenar nth-child() terletak pada keupayaannya untuk menggabungkan aritmetik ungkapan menggunakan pembolehubah "n". Pembolehubah ini mewakili kedudukan elemen anak dalam induknya.

Pemilih Ringkas untuk Setiap Elemen Ke-4

Untuk memilih setiap elemen div keempat, gantikan pemilih individu dengan berikut:

div:nth-child(4n)

Ungkapan ini bermaksud bahawa pemilih sepadan dengan mana-mana elemen div yang merupakan gandaan 4 (cth., 0, 4, 8, 12).

Penyesuaian melalui Aritmetik

Pembolehubah n membenarkan penyesuaian selanjutnya. Contohnya:

• 2n - 1: Memadankan elemen div bernombor ganjil (mis., 1, 3, 5).
• 4n 2: Memadankan elemen div dengan kedudukan yang dua lebih daripada gandaan 4 (mis., 2, 6, 10).

Menyamakan Ungkapan Aritmetik

Walaupun 4n dan 4n 4 mungkin kelihatan sama pada pandangan pertama, mereka tidak. nth-child() mula mengira dari 0. 4n akan memadankan elemen pada kedudukan 0, 4, 8, manakala 4n 4 akan memadankan elemen pada kedudukan 4, 8, 12.

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