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

Question

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

我们来看看w3.org文档:

使ID类型属性特殊的原因是没有两个这样的属性可以具有相同的值; 无论文档语言如何,ID属性都可用于唯一标识其元素.

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

#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标签汤的世界中,浏览器必须考虑这些破坏的规则而不破坏页面,因此您观察到的行为.

虽然浏览器的行为方式即使你这样做也是如此(幸运的是,对于无法帮助的情况),我不会称之为完全"安全",因为这样的行为可能不一致或者可靠.

最好的办法是尽可能忠实地遵守规则,只有在你有非常非常好的理由时才会违反规则(而且你几乎从不会这样做,所以甚至不考虑它).否则,就像约瑟夫·西尔伯所说的那样,使用专为分类或分组多个元素而设计的类.

任何人都能解释这种奇怪的情况吗？

CSS不强制或假定HTML文档中ID的唯一性; 相反,Selectors规范只是说明了这一点:

ID选择器表示具有与ID选择器中的标识符匹配的标识符的元素实例.

请注意在整个句子中使用"an"一词.

以下声明是一些示例用法,它使用"any"一词代替:

以下ID选择器表示ID类型属性值为"chapter1"的任何元素:

#chapter1

以下选择器表示ID类型属性值为"z98y"的任何元素.

*#z98y

符合条件的文件的假设在选区规范的第3级阐明,靠近该部分的开头(强调我的):

是什么使类型ID的属性特别的是,没有两个这样的属性可以具有相同的值一个符合的文件中,不管携带它们的元素的类型的; 无论文档语言如何,ID类型属性都可用于唯一标识其元素.

"符合"指的是与HTML的一致性,而不是CSS.请记住,这个文本不存在于2级规范中,这是您在问题中引用的规范.

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

换句话说:只因为你可以,并不意味着你应该.