多個 HTML 元素可以共享相同的 ID 並且仍然響應 CSS 選擇器嗎？

CSS 選擇器中的元素ID 和多重回應

在HTML 中，每個元素在文件中都應具有唯一的ID屬性。然而，一個常見的問題出現了：多個元素可以共享相同的 ID 值並回應單一 CSS ID 選擇器嗎？

W3C 文檔

根據W3C 文檔， 「兩個ID 屬性不能有相同的值…ID 屬性可用於唯一標識其元素。」這表示對多個元素使用相同的ID 不是有效的做法。

瀏覽器行為

儘管有 W3C 建議，但瀏覽器通常會容忍無效的 HTML 並嘗試處理它。例如，在以下範例中：

#red {
  color: red;
}

<p>

兩個段落都會顯示為紅色，即使它們共用相同的 ID。發生這種情況是因為瀏覽器試圖透過猜測開發人員的意圖並相應地解釋無效 HTML 來「默默地失敗」。

風險與限制

雖然瀏覽器可能會正確呈現頁面在上述場景中，偏離 HTML 規格可能會導致不可預見的副作用。例如，使用 document.getElementById('red') 將只傳回第一個符合的元素。此外，跨不同瀏覽器進行測試對於確保一致性至關重要。

避免 CSS 選擇器使用相同的 ID

最佳實踐是避免對多個元素使用相同的 ID。相反，請考慮使用類別名稱來定位共享相似樣式的元素。類別名稱是專門為此目的而設計的，並確保每個元素都有唯一的識別碼。

具有相同ID 的多個元素的替代方案

如果選擇具有相同ID 的多個元素ID 是絕對必要的，請考慮使用屬性選擇器：

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

但是，Internet Explorer 7 和Internet Explorer 不支援此方法下面。

以上是多個 HTML 元素可以共享相同的 ID 並且仍然響應 CSS 選擇器嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！