Question

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

使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及以下版本中不起作用...

Answer 2

在一个页面中为多个元素提供相同的ID是否安全？

如您所知，在一个页面中为多个元素提供相同的ID是违反验证规则的。但是，规则被破坏，并且在HTML标签汤的世界中，浏览器必须考虑这些破坏的规则而不破坏页面，因此您观察到的行为。

虽然浏览器的行为方式即使你这样做也是如此（幸运的是，对于无法帮助的情况），我不会称之为完全“安全”，因为这样的行为可能不会保持一致或可靠。

最好的选择是尽可能忠实地遵守规则，只有在你有非常好的理由（而且你几乎永远不会）时才会违反规则，所以不要考虑一下）。否则，like Joseph Silber said使用专门用于对多个元素进行分类或分组的类。

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

CSS不强制或假定HTML文档中ID的唯一性;相反，the Selectors spec只是说明了这一点：

ID选择器表示一个元素实例，其标识符与ID选择器中的标识符匹配。

请注意在整个句子中使用“an”一词。

以下声明是一些示例用法，使用“any”一词代替：

以下ID选择器表示ID类型属性值为“chapter1”的任何元素：
#chapter1
以下选择器表示ID类型属性值为“z98y”的任何元素。
*#z98y

符合规范的文件的假设在选区规范的第3级附近阐明，在该部分的开头附近（强调我的）：

使ID类型属性特殊的原因是，无论携带它们的元素的类型如何，没有两个这样的属性可以在符合文档中具有相同的值;无论文档语言如何，ID类型属性都可用于唯一标识其元素。

“conformant”指的是与HTML的一致性，而不是CSS。请记住，这个文本没有出现在2级规范中，这是你在问题中引用的那个。

请记住，引用的文字不是规范性的。虽然它是一种帮助实施者解决错误处理案例的方法，但它并不是一个必须遵循的强制性规则，事实上，任何实现都可以自由地表现出不同的行为而不违反规范。不要仅仅为了利用看似预期或一致的行为而编写无效的HTML，因为您无法保证这些行为将保持这种状态。任何CSS实现都可以自由地匹配共享相同ID的元素，甚至可以完全停止匹配它们，如果它决定它应该如何处理违反此规则的文档。

换句话说：只是因为你可以，并不意味着你应该。

Answer 3

这适用于简单的HTML样式，但不适用于查询。

来自jQuery API documentation：

每个id值只能在文档中使用一次。如果超过一个元素已分配相同的ID，使用该ID的查询只会选择DOM中第一个匹配的元素。这种行为但是，不应该依赖;包含多个文档的文档使用相同ID的元素无效。

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

3 个答案: