Bagaimanakah cara saya memilih elemen tertentu menggunakan pemilih anak ke- atau ke-jenis?

Memilih Elemen Khusus dengan anak ke-n atau jenis-ke-nth

Untuk memilih elemen pertama, kedua atau ketiga dengan diberikan nama kelas, anda boleh menggunakan nth-child atau nth-of-type pseudo-selectors. Pemilih ini membolehkan anda menyasarkan elemen tertentu berdasarkan kedudukannya dalam bekas induk atau dalam kalangan adik-beradik mereka daripada jenis yang sama.

Menggunakan nth-child

The nth- pemilih kanak-kanak memilih elemen berdasarkan kedudukannya antara semua elemen anak ibu bapa. Untuk menyasarkan elemen tertentu dengan nama kelas, bungkus elemen anda dalam bekas induk dan gunakan sintaks berikut:

<code class="css">parent_container:nth-child(item number) { ... }</code>

Contohnya, jika elemen anda terkandung dalam elemen induk dengan nama kelas "parent_class, " anda boleh memilih elemen pertama, kedua dan ketiga dengan nama kelas "myclass" seperti berikut:

<code class="css">.parent_class:nth-child(1) { ... }
.parent_class:nth-child(2) { ... }
.parent_class:nth-child(3) { ... }</code>

Menggunakan nth-of-type

The Pemilih jenis ke-nth memilih elemen berdasarkan kedudukannya dalam kalangan adik-beradik jenis yang sama. Ini berguna apabila anda mempunyai berbilang kelas dalam bekas induk dan ingin menyasarkan elemen tertentu dengan nama kelas tertentu. Sintaks adalah serupa dengan nth-child:

<code class="css">class_name:nth-of-type(item number) { ... }</code>

Menggunakan ini pada contoh anda, anda boleh memilih elemen pertama, kedua dan ketiga dengan nama kelas "myclass" seperti berikut:

<code class="css">.myclass:nth-of-type(1) { ... }
.myclass:nth-of-type(2) { ... }
.myclass:nth-of-type(3) { ... }</code>

Atas ialah kandungan terperinci Bagaimanakah cara saya memilih elemen tertentu menggunakan pemilih anak ke- atau ke-jenis?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!