Question

我听说使用多个id属性是一种非常糟糕的做法，但令我困惑的是如果这些元素是这样嵌套的......

<div id="slideshow1" class="slideshow">
    <div id="left" class="slideshow-arrow"></div>
    <div id="right" class="slideshow-arrow"></div>
</div>
<div id="slideshow2" class="slideshow">
    <div id="left" class="slideshow-arrow"></div>
    <div id="right" class="slideshow-arrow"></div>
</div>

我在这里用js做了一个例子，一切似乎都很好......

http://jsfiddle.net/6YPsX/

如果它们嵌套在同一个元素中，那么唯一的id会有意义，但ID真的需要对整个文档是唯一的吗？

Answer 1

ID不仅仅是一种查找元素的方式，还有其他与ID相关的事物。以下链接应该是有用的，并提供更深入的了解。以下是要点：

id属性在HTML中有几个角色：

作为样式表选择器。作为超文本链接的目标锚点。
作为从脚本引用特定元素的方法。
作为声明的OBJECT元素的名称。
供用户进行一般处理代理（例如，用于在从HTML提取数据时识别字段）将页面翻译成数据库，将HTML文档翻译成其他格式，等）。

link to w3 site

Answer 2

您可以在同一元素上拥有多个类

<div id="slideshow1" class="slideshow">
    <div class="slideshow-arrow left"></div>
    <div class="slideshow-arrow right"></div>
</div>

CSS

.slideshow-arrow {
    background: none top left no-repeat;
    width: 20px;
    height: 20px;
}
.slideshow-arrow.left {
    background-image: url('...');
}
.slideshow-arrow.right {
    background-image: url('...');
}

Answer 3

这是一个不好的做法，它不会通过W3C验证，当你尝试实现JavaScript时它会变得更糟。只需使用类名或给它们不同的id名称。

具有相同id的多个元素

3 个答案: