几个具有相同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及以下的环境中不起作用.