Bagaimanakah Saya Boleh Menggunakan CSS `nth-of-type` untuk Memilih Elemen Berdasarkan Kedua-dua Kedudukan dan Kelas?

CSS 3 nth-of-type: Mengehadkan kepada Kelas Tertentu

CSS 3's nth-of-type selector membenarkan pembangun memilih elemen berdasarkan mengenai kedudukan mereka dalam kumpulan adik-beradik. Walau bagaimanapun, pada masa ini ia mempunyai had dalam memilih elemen berdasarkan kelas mereka.

Secara khusus, jenis ke-nth mempertimbangkan semua elemen adik beradik, tanpa mengira kelas mereka, semasa menentukan kedudukan elemen. Ini bermakna jika anda ingin memilih setiap elemen ketiga dengan kelas tertentu, jenis ke-nth sahaja tidak boleh mencapai ini.

Sebagai contoh, dalam HTML yang disediakan, anda ingin memilih setiap elemen ketiga dengan kelas ".modul". Walau bagaimanapun, menggunakan ".featured.module:nth-of-type(3n 3)" juga akan memilih elemen ".featured.video" kerana ia juga merupakan adik beradik ketiga secara keseluruhan.

Penyelesaian

Malangnya, mengikut had semasa CSS, tiada cara langsung untuk mengehadkan jenis ke-n kepada kelas tertentu. Sebagai penyelesaian, anda boleh mempertimbangkan untuk menambah kelas unik secara manual, seperti ".module3" atau ".module6", pada setiap elemen ".module" ketiga. Ini akan membolehkan anda menggunakan nth-of-type untuk memilih berdasarkan kelas unik sebaliknya.

Nota: nth-of-class bukanlah pemilih yang sah dalam CSS 3, iaitu mengapa ia tidak boleh digunakan sebagai penyelesaian.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan CSS `nth-of-type` untuk Memilih Elemen Berdasarkan Kedua-dua Kedudukan dan Kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!