Bagaimana cara memilih dan gaya elemen kelas khusus pertama menggunakan CSS dan JavaScript?

Tepat memanipulasi CSS dan JavaScript: Gaya Elemen Kelas Khusus Pertama

Dalam pembangunan web, ia sering perlu untuk gaya elemen pertama kategori tertentu. Sebagai contoh, halaman mempunyai pelbagai elemen dengan kelas = "merah" tetapi hanya elemen pertama yang dijangka muncul dengan warna merah. Artikel ini akan menunjukkan bagaimana untuk mencapai ini menggunakan CSS dan JavaScript.

Contoh Struktur HTML:

Kod HTML berikut mengandungi Multiple Class = "Red" Elements:

<div id="test">
  <span>Saya rentang</span>
  <h1 id="Saya-H-cuma-tetapkan-gaya-saya-dengan-warna-merah">Saya H1, cuma tetapkan gaya saya dengan warna merah</h1>
  <h1 id="Saya-H">Saya H1</h1>
  <h1 id="Saya-H">Saya H1</h1>
  <h1 id="Saya-H">Saya H1</h1>
</div>

Kaedah 1: Pelaksanaan JavaScript

Kaedah document.querySelector() dengan mudah boleh memilih elemen sepadan yang pertama. Kod berikut menetapkan warna kelas pertama = elemen "merah" menjadi merah:

 document.QuerySelector ('. Merah'). Gaya.color = 'Red';

Kaedah 2: Pelaksanaan CSS

The :nth-child() pemilih kelas pseudo CSS boleh dipilih mengikut urutan elemen. Digabungkan dengan of kunci, elemen pertama dalam kelas tertentu boleh dipilih dengan tepat.

 .red: nth-child (1 of .red) {
  warna: merah;
}

Untuk gaya kelas terakhir = elemen "merah", anda boleh menggunakan :nth-last-child() pseudo-class:

 .red: nth-last-child (1 of .red) {
  Warna: Biru;
}

Keserasian Penerangan: Harus diingat bahawa :nth-child(n of selector) dan :nth-last-child(n of selector) mungkin mempunyai beberapa masalah dengan keserasian pelayar. Dalam sesetengah pelayar yang lebih tua, kaedah ini mungkin tidak berfungsi dengan baik. Oleh itu, kaedah yang dipilih bergantung kepada keperluan keserasian pelayar projek. Jika keserasian adalah kritikal, kaedah JavaScript umumnya lebih dipercayai.

Ringkasan: Kedua -dua JavaScript dan CSS boleh melaksanakan tetapan gaya elemen pertama kelas tertentu. Pemaju harus memilih kaedah yang paling sesuai berdasarkan keperluan projek sebenar dan pertimbangan keserasian pelayar.

Atas ialah kandungan terperinci Bagaimana cara memilih dan gaya elemen kelas khusus pertama menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!