多个具有相同ID的元素响应一个CSS ID选择器

  • Z时代
  • 2024-01-10
  • 分类：问答

在一页中为多个元素提供相同的ID是否安全？例如，当使用某些jquery插件，两次或多次运行某些滑块或图库时，通常会发生这种情况。我们知道，开发人员喜欢给html容器一些ID，以使脚本工作更快。

让我们阅读w3.org文档：

使ID类型的属性特别的原因是，没有两个这样的属性可以具有相同的值。无论使用哪种文档语言，ID属性都可以用来唯一标识其元素。

但是下一个示例具有2个具有相同ID的元素的示例在所有浏览器中都可以正常使用，尽管它无效：

#red {
  color: red;
}
<p id="red">I am a red text.</p>
<p id="red">I am a red text too.</p>

有人可以解释这种奇怪的情况吗？

回答：

浏览器总是尝试“静默失败”。这意味着即使您的HTML无效，浏览器也会尝试猜测您的意图，并相应地进行处理。

但是，背离规范会导致一些非常无法预料的副作用。

例如：

document.getElementById('red');

只会让你第一个。

您还必须在用户可能使用的所有浏览器中测试页面，以确保您的代码按预期工作。您不能仅仅 假设 它会起作用。

不要这样做！如果您需要使用同一CSS定位多个元素，请使用类名。那就是他们设计的目的…

话说回来; 如果您 需要选择具有相同ID的多个元素，请使用属性选择器：

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

但是请注意，这在IE7及以下版本中不起作用…

以上是 多个具有相同ID的元素响应一个CSS ID选择器 的全部内容， 来源链接： utcz.com/qa/433566.html

回到顶部