Question

我正在检查他们的div中颜色之间交替a certain webpage的方式，并发现了这个：

<div class="row8 inline clearfix" id="light-orange">...</div>
<div class="row8 inline clearfix" id="light-pink">...</div>
<div class="row8 inline clearfix" id="light-orange">...</div>
<div class="row8 inline clearfix" id="light-pink">...</div>
<div class="row8 inline clearfix" id="light-orange">...</div>
<div class="row8 inline clearfix" id="light-pink">...</div>
<div class="row8 inline clearfix" id="light-orange">...</div>
<div class="row8 inline clearfix" id="light-pink">...</div>

认为这是一个无法验证的HTML示例，我ran it through the W3C validator。它确实有错误，但没有一个关于ID的非唯一性。

我读过的所有内容都表明，ID在网页中必须是唯一的。这里的真实故事是什么？

Answer 1

您不应该在网页中有重复的ID，因为按ID绑定或应用于元素的内容只会应用于它找到的第一个ID。因此，您将只应用CSS或将事件绑定到具有给定ID的元素之一。如果您有重复的ID，则可能意味着您应该使用类。

Answer 2

HTML 5规范说，ID必须在其主要子树中是唯一的，如果我们读取它的定义，它基本上就是文档。

在谷歌上发现。如果要替换颜色，请使用类。 ID应始终是唯一的。

Answer 3

好吧，如果您将<!doctype html>（as being told here）添加到您的代码中，会出现大量重复ID 错误（ as being told here）。别担心;）

Answer 4

tl; dr ：id must be unique。

验证此页面by directly inputting its HTML时，验证程序会报告（不相关的）错误，该错误会停止报告以下所有错误：

上次错误后无法恢复。任何进一步的错误都将被忽略。

（我不确定为什么在输入URI进行验证时不会报告此错误。）

对于这些问题（必须id是唯一的？），最好检查相关规范，即您的案例中的HTML5：The id attribute

或者你可以验证一个最小的例子，例如：

<!DOCTYPE html>
<html>
<head>
  <title>@id test</title>
</head>
<body>

  <div id="light-orange"></div>
  <div id="light-pink"></div>
  <div id="light-pink"></div>

</body>
</html>

W3C验证器报告：

1错误
重复的ID浅粉色。

在HTML文档中重用id是W3C标准违规是一种神话吗？

4 个答案: