Mengapa ID Pendua dalam HTML Kadangkala Berfungsi, dan Apakah Amalan Terbaik?

<p>

<p>Berbilang Elemen dengan ID Yang Sama Bertindak Balas kepada Pemilih CSS

<p>Secara amnya dianggap sebagai amalan yang tidak baik untuk memberikan berbilang elemen ID yang sama dalam satu halaman web . Menurut dokumentasi W3C, atribut ID mesti mempunyai nilai unik untuk mengenal pasti elemen masing-masing secara unik.

<p>Walau bagaimanapun, situasi tertentu, seperti menggunakan pemalam jQuery, mungkin secara tidak sengaja menghasilkan ID pendua. Yang menghairankan, penyemak imbas cenderung untuk mengendalikan situasi ini dengan "gagal secara senyap." Mereka cuba mentafsir maksud di sebalik HTML yang tidak sah dan melaraskan tingkah laku mereka dengan sewajarnya.

<p>Sebagai contoh, pertimbangkan kod berikut:

#red {
  color: red;
}

<p>

<p>Walaupun ID pendua, kedua-dua perenggan akan kelihatan merah dalam semua pelayar utama. Walau bagaimanapun, tingkah laku ini tidak dijamin dan boleh membawa kepada kesan sampingan yang tidak dijangka.

<p>Contohnya, mengakses elemen dengan IDnya menggunakan document.getElementById('red') hanya akan mengembalikan elemen pertama. Untuk memilih kedua-dua elemen, anda perlu menggunakan pemilih atribut seperti document.querySelectorAll('p[id="red"]'). Walau bagaimanapun, pendekatan ini tidak disokong dalam IE7 dan ke bawah.

<p>Untuk mengelakkan potensi isu, adalah amat disyorkan untuk menggunakan nama kelas dan bukannya ID untuk menyasarkan berbilang elemen dengan CSS. Nama kelas direka bentuk dengan jelas untuk tujuan ini dan memastikan konsistensi merentas semua penyemak imbas.

Atas ialah kandungan terperinci Mengapa ID Pendua dalam HTML Kadangkala Berfungsi, dan Apakah Amalan Terbaik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!