html - 重复 ID 的 W3C 错误

Question

我正在使用 http://validator.w3.org验证我的代码。

但是我有 45 个错误，主要与重复的 ID 有关。

我认为在可能的情况下重新使用 CSS 是一个很好的实践。

示例代码:

CSS

#cloudbullet {
background-color: #85c0bf;
height: 22px;
left: 13px;
margin-top: 7px;
position: relative;
top: 63px;
width: 20px;

HTML

<div id="container1-title" class="">
        <h2>Cloud/Hosting</h2>
        </div>

        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>

效果是我在垂直行中得到 6 个 css 框。

请有人告诉我我所做的是否正确，我是否应该忽略验证或者是否需要以不同的方式完成？

谢谢，

Answer 1

对于多次出现的内容，您需要对它们进行分类而不是识别它们的内容。一个 id 在页面中应该是唯一的。

尽管有些东西可以使用重复的标识符，但不确定它在所有浏览器中是否都一样，有些东西肯定不会起作用。例如，如果您想使用标识符通过 JavaScript 查找元素，就会遇到问题。

改用类属性。 CSS:

.cloudbullet {
  background-color: #85c0bf;
  height: 22px;
  left: 13px;
  margin-top: 7px;
  position: relative;
  top: 63px;
  width: 20px;
}

HTML:

<div id="container1-title">
  <h2>Cloud/Hosting</h2>
</div>

<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>