多個 HTML 元素可以共用相同的 ID，會有什麼後果？

多個元素可以共用同一個 ID 選擇器嗎？

儘管 W3C 明確規定 ID 屬性必須是唯一的，但瀏覽器經常表現出遇到重複 ID 時的不同行為。

提供的範例說明了這種差異，其中兩個元素具有相同的 ID 回應 CSS 選擇器。這主要是由於瀏覽器傾向於「默默地失敗」並嘗試解釋開發人員的意圖，即使它違反了 HTML 標準。

但是，值得注意的是，偏離規範可能會導致不可預見的後果:

• document.getElementById('red') 只會傳回第一個元素ID。
• 隨著瀏覽器實現的不同，可能會出現跨瀏覽器相容性問題。

建議：

為了獲得最佳結果，強烈建議不要這樣做為元素分配重複的 ID。相反，利用類別名稱來定位具有相同 CSS 樣式的多個元素。類別是專門為此目的而設計的。

多ID 選擇的替代方法：

如果絕對必要，可以使用屬性選擇器來選擇具有相同ID 的多個元素:

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

但是，IE7及以下版本不支援此方法。

以上是多個 HTML 元素可以共用相同的 ID，會有什麼後果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！