Bagaimanakah Saya Boleh Memilih Elemen Khusus dengan Nama Kelas yang Sama Berdasarkan Kedudukannya dalam HTML?

Memilih Elemen dengan Nama Kelas Diberi Berdasarkan Kedudukan

Dalam dokumen HTML anda, anda telah menentukan kelas yang dipanggil "myclass" yang digunakan kepada pelbagai elemen. Anda ingin memilih elemen pertama, kedua atau ketiga dengan kelas ini, tanpa mengira kedudukannya dalam penanda.

Untuk mencapai ini tanpa menggunakan JavaScript atau jQuery, anda boleh menggunakan pemilih pseudo CSS:

1. Menggunakan anak ke-n(nombor item)

Pemilih ini menyasarkan elemen anak ke-n dalam elemen induknya. Dalam kes anda, anda ingin menggunakan:

.parent_class:nth-child(1) { }  // Selects first ".myclass" element
.parent_class:nth-child(2) { }  // Selects second ".myclass" element
.parent_class:nth-child(3) { }  // Selects third ".myclass" element

2. Menggunakan nth-of-type(item number)

Pemilih ini menyasarkan kejadian ke-n bagi jenis elemen tertentu dalam elemen induknya. Memandangkan anda ingin memilih elemen "div" dengan kelas "myclass", anda akan menggunakan:

.myclass:nth-of-type(1) { }  // Selects first ".myclass" element
.myclass:nth-of-type(2) { }  // Selects second ".myclass" element
.myclass:nth-of-type(3) { }  // Selects third ".myclass" element

Dengan menggunakan pemilih pseudo ini, anda boleh menyasarkan elemen tertentu secara berkesan berdasarkan kedudukannya, membolehkan anda memohon gaya yang berbeza untuk setiap satu seperti yang dikehendaki.

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