Bolehkah CSS `nth-of-type` Memilih Elemen Berdasarkan Kelas Tertentu?

Bolehkah CSS jenis ke-3 Terhad kepada Kelas?

Dalam CSS 3, pemilih ke-3 jenis boleh digunakan untuk memilih elemen tertentu berdasarkan kedudukannya dalam kumpulan elemen yang serupa. Walau bagaimanapun, pemilih ini tidak membenarkan elemen penyasaran berdasarkan kelas mereka.

Soalan:

Adakah mungkin untuk menggunakan jenis ke-nth pada kelas tertentu? Sebagai contoh, bagaimana anda boleh menyasarkan setiap elemen ketiga dengan kelas .modul?

Jawapan:

Malangnya, CSS tidak menyediakan nth-of- terbina dalam pemilih kelas. Ini bermakna tidak mungkin untuk mengehadkan jenis ke-n kepada kelas tertentu.

Penyelesaian:

Untuk mencapai kesan yang diingini, anda boleh menggunakan yang baharu kelas kepada setiap pertiga .modul secara manual. Ini boleh dilakukan menggunakan JavaScript atau prapemproses seperti Sass.

Berikut ialah contoh menggunakan JavaScript:

const modules = document.querySelectorAll('.featured.module');
for (let i = 2; i < modules.length; i += 3) {
  modules[i].classList.add('module--nth-of-type-3n');
}

Setelah kelas tambahan digunakan, anda boleh menggunakan peraturan CSS berikut untuk menyasarkan setiap pertiga .modul:

.featured.module.module--nth-of-type-3n {
  /* Your desired styling here */
}

Walaupun penyelesaian ini mungkin tidak begitu elegan seperti kelas ke-1 yang berdedikasi pemilih, ia membolehkan anda mencapai kefungsian yang diingini menggunakan ciri CSS dan JavaScript sedia ada.

Atas ialah kandungan terperinci Bolehkah CSS `nth-of-type` Memilih Elemen Berdasarkan Kelas Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!