Bolehkah CSS `nth-of-type` dihadkan kepada Elemen dengan Kelas Tertentu?

Menghadkan CSS ke-3 jenis kepada Kelas Tertentu

Soalan:

Adakah terdapat cara untuk memperhalusi pemilih jenis ke-3 CSS untuk hanya menyasarkan elemen dalam sesuatu tertentu kelas?

Latar Belakang:

Pertimbangkan senario dengan bahagian dinamik yang menampilkan reka letak pelbagai yang dilambangkan dengan kelas yang berbeza. Matlamatnya adalah untuk menyerlahkan setiap bahagian ketiga dengan kelas ".modul" tanpa menjejaskan elemen lain.

Penyelesaian:

Malangnya, tiada cara asli untuk mencapai ini menggunakan nth-of-type. Sebabnya ialah nth-of-class tidak disokong dalam CSS. Akibatnya, mengehadkan jenis ke-n kepada kelas tidak mungkin.

Sebagai alternatif, adalah perlu untuk menambah kelas baharu secara manual, seperti "modul ketiga," pada setiap bahagian ketiga dengan kelas ".modul". Kelas tersuai ini kemudiannya boleh disasarkan menggunakan nth-of-type.

HTML:

<section class="featured video">
  <h1>VIDEO</h1>
</section>
<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>
<section class="featured module third-module">
  <h1>NOT A VIDEO (3)</h1>
</section>
<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>
<section class="featured module third-module">
  <h1>NOT A VIDEO (6)</h1>
</section>
<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>
<section class="featured module third-module">
  <h1>NOT A VIDEO (9)</h1>
</section>

CSS:

.featured {
  width: 31%;
  margin: 0 0 20px 0;
  padding: 0 3.5% 2em 0;
  float: left;
  background: #ccc;
}

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

.featured.video {
  width: auto;
  padding: 0 0 2em 0;
  float: none;
}

Penyelesaian ini memastikan bahawa hanya bahagian ".module" dengan kelas ".third-module" menerima yang diingini penggayaan, kerana ia disasarkan secara khusus oleh pemilih jenis ke-n.

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