Bagaimanakah Saya Boleh Menyasarkan Setiap Elemen Ketiga dengan Kelas Tertentu Menggunakan CSS `nth-of-type`?

CSS jenis ke-3 Terhad kepada Kelas

Pemilih jenis ke-nth membolehkan anda memilih setiap anak ke-nth jenis tertentu . Walau bagaimanapun, adalah sukar untuk mengehadkan pemilihan ini kepada kelas tertentu.

Masalah:

Anda mahu menyasarkan setiap elemen .modul ketiga secara dinamik, tanpa mengira penandanya . Walau bagaimanapun, jenis ke-nth mengira berdasarkan jenis elemen, bukan kelas.

Penyelesaian:

Pada masa ini, tiada cara langsung untuk mengehadkan ke-nth-of -taip ke kelas tertentu. Satu penyelesaian adalah dengan menambah kelas tambahan secara manual pada setiap elemen .module ketiga.

Sebagai contoh, dalam HTML yang disediakan:

<section class="featured module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>

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

<section class="featured module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>

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

Kemudian, gunakan gaya CSS berikut:

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

Ini kini akan menggayakan setiap kejadian ketiga kelas .modul dengan tambahan .ketiga kelas.

Nota:

Penyelesaian ini memerlukan penyelenggaraan manual semasa anda menambah atau mengalih keluar elemen .modul. Untuk senario yang lebih maju, pertimbangkan untuk menggunakan prapemproses JavaScript atau CSS untuk menjana kelas yang diperlukan secara automatik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyasarkan Setiap Elemen Ketiga dengan Kelas Tertentu Menggunakan CSS `nth-of-type`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!