Rumah >hujung hadapan web >tutorial css >Bolehkah CSS `nth-of-type` dihadkan kepada Elemen dengan Kelas Tertentu?

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

Linda Hamilton
Linda Hamiltonasal
2024-12-24 06:56:10660semak imbas

Can CSS `nth-of-type` be Limited to Elements with a Specific Class?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn