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

Question

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

让我们阅读 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.

但是下一个例子中有 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 及以下版本中不起作用...