Bagaimana untuk Memilih Elemen Khusus dengan Nama Kelas yang Sama dalam HTML?

Memilih Elemen Tertentu dengan Nama Kelas Diberi

Apabila bekerja dengan elemen HTML, selalunya perlu memilih elemen tertentu dalam senarai elemen yang berkongsi nama kelas. Ini amat berguna untuk menggunakan gaya atau melakukan tindakan pada kejadian tertentu kelas.

Menggunakan nth-child

Satu pendekatan untuk memilih elemen tertentu dalam senarai kelas ialah menggunakan nth-child() pemilih kelas pseudo. Pemilih ini membolehkan anda memilih kejadian ke-n bagi elemen dalam elemen induknya.

Contoh:

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- some other code+containers... -->

    <div class="myclass">my text2</div>
    <!-- some other code+containers... -->

    <div class="myclass">my text3</div>
    <!-- some other code+containers... -->
</div>

.parent_class:nth-child(1) { /* styles for the first element with the "myclass" class within the "parent_class" element */ }
.parent_class:nth-child(2) { /* styles for the second element with the "myclass" class within the "parent_class" element */ }
.parent_class:nth-child(3) { /* styles for the third element with the "myclass" class within the "parent_class" element */ }</code>

Menggunakan nth-of- taip

Sebagai alternatif, anda boleh menggunakan nth-of-type() pemilih kelas pseudo. Pemilih ini membolehkan anda memilih kejadian ke-n bagi unsur jenis tertentu dalam elemen induknya.

Contoh:

<code class="css">.myclass:nth-of-type(1) { /* styles for the first element with the "myclass" class */ }
.myclass:nth-of-type(2) { /* styles for the second element with the "myclass" class */ }
.myclass:nth-of-type(3) { /* styles for the third element with the "myclass" class */ }</code>

Dengan menggunakan nth-child() atau nth-of-type(), anda boleh memilih elemen tertentu dengan nama kelas tertentu dengan berkesan, tanpa mengira kedudukannya dalam markup dan menggunakan gaya atau melakukan tindakan sewajarnya.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Elemen Khusus dengan Nama Kelas yang Sama dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!