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

Question

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

在一个页面中给几个元素相同的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>

有人能解释一下这种奇怪的情况吗？

Answer 1

浏览器总是试图“默默地失败”。这意味着，即使HTML无效，浏览器也会试图猜测您的意图，并相应地处理它。然而，偏离规范可能会造成一些不可预见的副作用。例如：document.getElementById('red');只会给你第一个机会。您还必须在用户可能使用的所有浏览器中测试页面，以确保代码按预期工作。你不能就这样假设它会成功的。简言之：别这样！如果需要使用相同的CSS定位多个元素，请使用类名。这就是他们设计的目的.。既然这么说；如果你真的需要选择具有相同ID的多个元素，请使用属性选择器：document.querySelectorAll('p[id="red"]');不过，请注意，这在IE7及以下的环境中不起作用.