: nth-anak - Trik CSS

Isi kandungan

The :nth-childpemilih membolehkan anda untuk memilih satu atau lebih unsur-unsur berdasarkan perintah sumber mereka, menurut formula.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "struktural pseudo-class", yang bermaksud digunakan untuk menggayakan konten berdasarkan hubungannya dengan elemen ibu bapa dan saudara.

Andaikan kita membina grid CSS, dan ingin membuang margin pada setiap modul grid keempat. Inilah HTML:

 One Two Three Four Five

Daripada menambahkan kelas ke setiap item keempat (contohnya .last), kita dapat menggunakan :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

The :nth-childpemilih mengambil hujah: ini boleh menjadi integer tunggal, kata kunci even, oddatau formula. Sekiranya bilangan bulat ditentukan hanya satu elemen yang dipilih-tetapi kata kunci atau formula akan berulang melalui semua anak elemen induk dan memilih elemen yang sepadan - serupa dengan menavigasi item dalam array JavaScript. Kata kunci "genap" dan "ganjil" adalah mudah (masing-masing 2, 4, 6, dll. Atau 1, 3, 5). Rumus dibina menggunakan sintaks an+b, di mana:

  • "A" adalah nilai integer
  • "N" adalah huruf harfiah "n"
  • "+" Adalah pengendali dan mungkin "+" atau "-"
  • "B" adalah bilangan bulat dan diperlukan jika operator disertakan dalam formula

Penting untuk diperhatikan bahawa formula ini adalah persamaan, dan berulang melalui setiap elemen saudara, menentukan mana yang akan dipilih. Bahagian "n" dari formula, jika disertakan, mewakili sekumpulan bilangan bulat positif yang meningkat (seperti melakukan lelaran melalui array). Dalam contoh di atas, kami memilih setiap elemen keempat dengan formula 4n, yang berfungsi kerana setiap kali elemen diperiksa, "n" meningkat satu (4 × 0, 4 × 1, 4 × 2, 4 × 3, dll). Sekiranya susunan elemen sepadan dengan hasil persamaan, ia akan dipilih (4, 8, 12, dll). Untuk penjelasan yang lebih mendalam mengenai matematik yang terlibat, sila baca artikel ini.

Untuk menggambarkan lebih lanjut, berikut adalah beberapa contoh :nth-childpemilih yang sah :

Nasib baik, anda tidak perlu melakukan matematik sendiri-ada beberapa :nth-childpenguji dan penjana di luar sana:

  • Penguji Trik CSS
  • Penguji Lea Verou

: nth-child (an + b dari)

Terdapat penapis yang tidak diketahui yang dapat ditambahkan :nth-childsesuai dengan spesifikasi Pemilih CSS: Keupayaan untuk memilih :nth-childsubset elemen, menggunakan of format. Katakan anda mempunyai senarai kandungan campuran: Ada yang mempunyai kelas .video, ada yang mempunyai kelas .picture, dan anda mahu memilih 3 gambar pertama. Anda boleh melakukannya dengan penapis "of" seperti:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Perhatikan bahawa ini berbeza dengan menambahkan pemilih secara langsung ke :nth-childpemilih:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Ini sedikit membingungkan, jadi contoh mungkin dapat menggambarkan perbezaannya:

Sokongan penyemak imbas untuk penapis "of" sangat terhad: Pada penulisan ini, hanya Safari yang menyokong sintaks tersebut. Untuk memeriksa status penyemak imbas kegemaran anda, berikut adalah isu terbuka yang berkaitan dengan :nth-child(an+b of s):

  • Firefox: Sokongan untuk anak-anak (An + B sel)
  • Chrome: Terapkan: nth-child (an + b dari S)

Tempat Menarik

  • :nth-childberulang melalui elemen bermula dari bahagian atas susunan sumber. Satu-satunya perbezaan antara ia :nth-last-childadalah bahawa yang terakhir berulang melalui elemen bermula dari bawah susunan sumber.
  • Sintaks untuk memilih nbilangan elemen pertama agak bertentangan intuitif. Anda mulakan dengan -njumlah elemen positif yang ingin anda pilih. Sebagai contoh, li:nth-child(-n+3)akan memilih 3 lielemen pertama .
  • The :nth-childpemilih adalah hampir sama dengan :nth-of-typetetapi dengan satu perbezaan kritikal: ia adalah kurang tertentu. Dalam contoh kita di atas, mereka akan menghasilkan hasil yang sama kerana kita melakukan iterasi hanya pada .moduleelemen, tetapi jika kita melakukan lelaran pada kumpulan adik beradik yang lebih kompleks, :nth-childakan cuba memadankan semua adik-beradik, bukan hanya adik-beradik dengan jenis elemen yang sama. Ini menunjukkan kekuatan :nth-child-it dapat memilih unsur saudara dalam susunan, bukan hanya elemen yang ditentukan sebelum titik dua.

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Sebarang 3.2+ Sebarang 9.5+ 9+ Sebarang Sebarang

:nth-childdiperkenalkan dalam CSS Selectors Module 3, yang bermaksud versi lama penyemak imbas tidak menyokongnya. Walau bagaimanapun, sokongan penyemak imbas moden sempurna, dan pemilih semu baru digunakan secara meluas dalam persekitaran pengeluaran. Sekiranya anda memerlukan sokongan penyemak imbas yang lebih lama, baik polyfill untuk IE, atau gunakan pemilih ini dengan cara yang tidak kritikal á la peningkatan progresif, yang disyorkan.

Artikel menarik...