Bolehkah Berbilang Elemen HTML Berkongsi ID yang Sama dan Masih Membalas Pemilih CSS?

ID Elemen dan Respons Berbilang dalam Pemilih CSS

Dalam HTML, setiap elemen harus mempunyai atribut ID unik dalam dokumen. Walau bagaimanapun, persoalan biasa timbul: bolehkah berbilang elemen berkongsi nilai ID yang sama dan bertindak balas kepada pemilih ID CSS tunggal?

Dokumentasi W3C

Menurut dokumentasi W3C, "tiada dua atribut ID boleh mempunyai nilai yang sama... atribut ID boleh digunakan untuk mengenal pasti elemennya secara unik." Ini menunjukkan bahawa menggunakan ID yang sama untuk berbilang elemen bukanlah amalan yang sah.

Gelagat Penyemak Imbas

Walaupun pengesyoran W3C, penyemak imbas sering bertolak ansur dengan HTML yang tidak sah dan cuba mengendalikan ia. Contohnya, dalam contoh berikut:

#red {
  color: red;
}

<p>

Kedua-dua perenggan akan muncul dalam warna merah, walaupun mereka berkongsi ID yang sama. Ini berlaku kerana penyemak imbas cuba "gagal secara senyap" dengan meneka niat pembangun dan mentafsir HTML yang tidak sah dengan sewajarnya.

Risiko dan Had

Sedangkan penyemak imbas mungkin memaparkan halaman dengan betul dalam senario di atas, menyimpang daripada spesifikasi HTML boleh membawa kepada kesan sampingan yang tidak dijangka. Contohnya, menggunakan document.getElementById('red') hanya akan mengembalikan elemen padanan pertama. Selain itu, ujian merentas penyemak imbas yang berbeza adalah penting untuk memastikan konsistensi.

Elakkan ID yang Sama untuk Pemilih CSS

Sebagai amalan terbaik, elakkan menggunakan ID yang sama untuk berbilang elemen. Sebaliknya, pertimbangkan untuk menggunakan nama kelas untuk menyasarkan elemen yang berkongsi gaya yang serupa. Nama kelas direka khusus untuk tujuan ini dan memastikan setiap elemen mempunyai pengecam unik.

Alternatif untuk Berbilang Elemen dengan ID Yang Sama

Jika memilih berbilang elemen dengan yang sama ID amat diperlukan, pertimbangkan untuk menggunakan pemilih atribut:

document.querySelectorAll('p[id="red"]');

Walau bagaimanapun, pendekatan ini tidak disokong dalam Internet Explorer 7 dan ke bawah.

Atas ialah kandungan terperinci Bolehkah Berbilang Elemen HTML Berkongsi ID yang Sama dan Masih Membalas Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!