在 HTML 中使用重复的 ID 时会发生什么？

具有相同 ID 的多个元素：无效之旅

尽管 W3C 明确规定页面中的两个元素不应共享相同的 ID，但这是一个令人费解的现象当多个元素拥有相同的 ID 时就会出现这种情况。让我们研究一下这种异常的影响。

浏览器行为

浏览器通常采用“静默失败”的方法，解释无效的 HTML 以符合他们的期望。因此，虽然它是无效的，但具有相同 ID 的两个元素的 HTML 示例可以在所有浏览器中工作。

潜在的副作用

但是，如果偏离规范，您就打开了大门不可预见的后果。例如，使用 getElementById() 方法只会检索具有指定 ID 的第一个元素。

更安全的替代方案

不要使用具有相同 ID 的多个元素，而是使用类名称进行样式设置元素组。这种做法符合CSS选择器的预期设计。

查询具有相同ID的元素

如果你绝对必须选择具有相同ID的多个元素，你可以求助于属性选择器：

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

请注意，此方法可能不适用于较旧的浏览器版本，例如 IE7 和

结论

虽然浏览器可能会容纳无效的 HTML，但强烈建议不要依赖这种行为。为了一致性、可维护性并避免潜在问题，请使用类名来设计相似元素的样式。

以上是在 HTML 中使用重复的 ID 时会发生什么？的详细内容。更多信息请关注PHP中文网其他相关文章！