0

我正在检查某个网页在其 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>
<div class="row8 inline clearfix" id="light-orange">...</div>
<div class="row8 inline clearfix" id="light-pink">...</div>

认为这是一个无法验证的 HTML 示例，我通过 W3C 验证器运行它。它确实有错误，但没有一个关于 id 的非唯一性。

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

4

4 回答 4

1

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

于 2013-08-26T01:36:46.130 回答
1

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

在谷歌上找到了。如果要交替颜色，请使用类。ID 应该始终是唯一的。

于 2013-08-26T01:37:33.887 回答
1

好吧，如果您在您的代码中添加<!doctype html>（如此处所述），您将收到大量重复 ID错误（如此处所述）。不用担心 ;）

于 2013-08-26T01:37:53.597 回答
0

tl; dr：id必须是唯一的。

通过直接输入其 HTML 来验证此页面时，验证器会报告一个（不相关的）错误，该错误会停止报告以下所有错误：

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

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

对于此类问题（必须id是唯一的？），最好检查相关规范，即在您的情况下为 HTML5 ：id属性

或者您可以验证一个最小的示例，例如：

<!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 浅粉色。

于 2015-05-23T02:24:00.850 回答