: nth-of-type - Trik CSS

The :nth-of-typepemilih membolehkan anda memilih satu atau lebih unsur-unsur berdasarkan perintah sumber mereka, menurut formula. Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "kelas pseudo struktural", yang bermaksud ia digunakan untuk menggayakan konten berdasarkan hubungannya dengan elemen ibu bapa dan saudara.

Katakan kita mempunyai senarai yang tidak tersusun dan ingin "zebra-stripe" item senarai bergantian:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

Daripada menambahkan kelas ke setiap item senarai (mis. .even& .odd) Kita boleh menggunakan :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Seperti yang anda lihat, :nth-of-typeambil argumen: ini boleh menjadi bilangan bulat tunggal, kata kunci "genap" atau "ganjil", atau formula seperti yang ditunjukkan di atas. Sekiranya bilangan bulat ditentukan hanya satu elemen yang dipilih-tetapi kata kunci atau formula akan berulang melalui semua anak dari elemen induk dan memilih elemen yang sepadan-serupa dengan menavigasi item dalam array dalam JavaScript. Kata kunci "genap" dan "ganjil" adalah mudah, tetapi 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 kedua dengan formula 2n, yang berfungsi kerana setiap kali elemen diperiksa, "n" meningkat satu (2 × 0, 2 × 1, 2 × 2, 2 × 3, dll). Sekiranya susunan elemen sepadan dengan hasil persamaan, ia akan dipilih (2, 4, 6, dll). Untuk penjelasan yang lebih mendalam mengenai matematik yang terlibat, sila baca artikel ini.

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

Lihat Pen ini!

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

• Penguji Trik CSS
• Penguji Lea Verou

Tempat Menarik

• :nth-of-typeberulang melalui elemen bermula dari bahagian atas susunan sumber. Satu-satunya perbezaan antara ia :nth-last-of-typeadalah bahawa yang terakhir berulang melalui elemen bermula dari bawah susunan sumber.
• The :nth-of-typepemilih adalah hampir sama dengan :nth-childtetapi dengan satu perbezaan kritikal: ia adalah lebih khusus. Dalam contoh kita di atas, mereka akan menghasilkan hasil yang sama kerana kita melakukan iterasi hanya pada lielemen, 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-of-type-itu mensasarkan jenis elemen tertentu dalam susunan yang berkaitan dengan adik beradik yang serupa, bukan semua adik-beradik.

Sokongan Penyemak Imbas

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

:nth-of-typediperkenalkan 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.