Bagaimanakah Saya Boleh Mengehadkan Pemilih `jenis-jenis` CSS3 kepada Kelas Tertentu?

Mengehadkan Pemilih CSS 3 Jenis ke-3 kepada Kelas

Seperti yang dilihat dalam contoh yang anda berikan, pemilih jenis ke-n CSS 3 beroperasi berdasarkan pada jenis elemen, bukannya kelas tertentu. Ini boleh menimbulkan cabaran apabila anda ingin mengehadkan pemilihan jenis ke-n kepada kelas tertentu.

Pendekatan Alternatif menggunakan anak ke-nth

Sejak ke-dari- kelas tidak wujud, penyelesaian alternatif ialah menggunakan nth-child. Pemilih anak ke-n memilih elemen berdasarkan kedudukannya dalam elemen anak elemen induknya.

Berikut ialah CSS yang diubah suai:

.featured.module:nth-child(3n+3) {
  padding-right: 0;
  background: red;
}

Dalam kod yang disemak ini, bukannya menyasarkan setiap ke-3- of-type, kami memilih setiap elemen anak ketiga yang mempunyai kelas "modul". Pendekatan ini mencapai kesan yang diingini untuk menggayakan setiap elemen .modul ketiga.

Penambahan Kelas Manual

Pilihan lain, seperti yang dinyatakan dalam penyelesaian yang disediakan, adalah dengan menambah secara manual kelas baharu kepada setiap pertiga .modul. Pendekatan ini memerlukan lebih banyak kerja manual, tetapi ia memberikan kawalan yang lebih besar ke atas pemilihan elemen.

Ingat untuk mengubah suai CSS anda dengan sewajarnya:

.featured.module-third {
  padding-right: 0;
  background: red;
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengehadkan Pemilih `jenis-jenis` CSS3 kepada Kelas Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!