具有相同 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>有人能解释一下这种奇怪的情况吗？
Is it safe to give several elements the same ID in one page? For example this often happens, when using some jquery plugins, when you run some slider or gallery twice or more. We know, developers like to give some ID to the html container in order the script works faster.
Let's read w3.org documentation:
What makes attributes of type ID special is that no two such
attributes can have the same value; whatever the document language, an
ID attribute can be used to uniquely identify its element.
But the next example with 2 elements having the same ID works fine in all browsers, though it's not valid:
#red {
color: red;
}<p id="red">I am a red text.</p>
<p id="red">I am a red text too.</p>Can anybody explain this strange situation?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如您所知，在单个页面中为多个元素提供相同的 ID 是违反验证规则的。然而，规则被打破了，在 HTML 标签汤的世界中，浏览器必须在不破坏页面的情况下解释这些被打破的规则，因此您观察到的行为。
尽管事实证明，即使您这样做，浏览器也会以相同的方式运行（幸运的是，在无法帮助的情况下），但我不会称这样做完全“安全”，因为这种行为可能不一致或不安全。可靠的。
最好的选择是尽可能忠实地遵守规则，并且只有在您有非常非常充分的理由时才违反规则（并且您几乎永远不会，所以甚至不要考虑它） 。否则，就像 Joseph Silber 所说的，使用专门为对多个元素进行分类或分组而设计的类。
HTML 文档中 ID 的唯一性不是由 CSS 强制或假定的；相反，选择器规范只是简单地说明了这一点：
请注意这句话中“an”一词的使用。
该语句后面是一些示例用法，其中使用单词“any”代替：
选择器规范的第 3 级澄清了一致文档的假设，靠近本节的开头（强调我的）：
其中“符合”是指符合 HTML，而不是 CSS。请记住，此文本未出现在 2 级规范中，这是您在问题中引用的规范。
请记住，引用的文本不具有规范性。虽然这是帮助实现者解决错误处理情况的一种方式，但这并不是必须遵循的强制规则，而且事实上，任何实现都可以自由地采取不同的行为而不违反规范。不要仅仅为了利用看似预期或一致的行为而编写无效的 HTML，因为您无法保证这些行为将保持这种状态。任何 CSS 实现都可以自由地以不同方式匹配共享相同 ID 的元素，甚至完全停止匹配它们，如果它决定应该如何处理违反此规则的文档。
换句话说：仅仅因为你可以，并不意味着你应该这样做。
As you know, it's against the validation rules to give more than one element the same ID in a single page. However, rules are broken, and in the world of HTML tag soup, browsers have to account for these broken rules without breaking pages, hence the behavior you observe.
Although browsers have been shown to behave the same way even if you do so (fortunately for situations where it can't be helped), I wouldn't call it totally "safe" to do so, as such behavior may not be consistent or reliable.
The best bet is to follow the rules as faithfully as you can, and only break the rules if you have very, very good reasons to (and you almost never will, so don't even consider it). Otherwise, like Joseph Silber said, use classes, designed specifically for classifying or grouping multiple elements.
The uniqueness of IDs in an HTML document is not enforced or assumed by CSS; instead, the Selectors spec simply states this:
Notice the use of the word "an" throughout this sentence.
Following that statement are some example uses, which use the word "any" instead:
The assumption of a conformant document is clarified by level 3 of the Selectors spec, near the beginning of the section (emphasis mine):
Where "conformant" refers to conformance to HTML, not CSS. Keep in mind that this text wasn't present in the level 2 spec, which is the one you quote in your question.
Bear in mind that the text that is quoted is not normative. While it's a way of helping implementers work out error-handling cases, it's not a compulsory rule to be followed, and indeed, any implementation is free to behave differently without being in violation of the spec. Don't write invalid HTML just to take advantage of what may seem to be expected or consistent behaviors, because you can't guarantee that these behaviors will remain that way. Any CSS implementation is free to match elements sharing the same ID differently, or even stop matching them altogether, if it decides that's how it should handle documents that break this rule.
In other words: just because you can, doesn't mean you should.
这适用于简单的 HTML 样式，但不适用于查询。
来自 jQuery API 文档：
This works with simple HTML styling but will not work with queries.
From the jQuery API documentation:
浏览器总是试图“默默地失败”。这意味着即使您的 HTML 无效，浏览器也会尝试猜测您的意图，并进行相应的处理。
然而，偏离规范可能会导致一些非常不可预见的副作用。
例如：
只会给你第一个。
您还必须在用户可能使用的所有浏览器中测试您的页面，以确保您的代码按预期工作。您不能仅仅假设它会起作用。
简而言之：不要这样做！如果您需要使用相同的 CSS 定位多个元素，请使用类名。这就是它们的设计目的……
话虽如此；如果您确实需要选择具有相同 ID 的多个元素，请使用属性选择器：
但请注意，这在 IE7 及更低版本中不起作用...
Browsers always try to "fail silently". What this means is that even though your HTML is invalid, the browser will try to guess what your intent was, and handle it accordingly.
However, deviating from the spec can cause some very unforeseen side effects.
For example:
will only get you the first one.
You'll also have to test your page in all the browsers that your users might use, to make sure your code works as intended. You can't just assume that it'll work.
In short: Don't do this! If you need to target several elements with the same CSS, use a class name. That's what they were designed for...
Having said that; if you really need to select multiple elements with the same ID, use an attribute selector:
Note however, that this doesn't work in IE7 and below...