为什么不应该重复id？ [复制]

Question

<div id="full-width">
<div id="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div id="full-width">
<div id="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div id="wrap"><!--contents with fixed width:: 950px--></div>

<div id="wrap"><!--contents with fixed width:: 950px--></div>

<div id="full-width"><!--contents with full width:: 100%--></div>

关键问题

这很好用，但是许多编码人员或说 css 规则指示我们不应多次使用相同的 id。那么我该如何放置我的标记呢？谁能描述一下我们应该只使用 1 个 id 不超过这个不起作用？

Answer 1

ID 是唯一标识符，因此是 there should only be 1 per document（否则它不是唯一的）。

将 id 替换为 class 并更改您的 CSS 以使用类选择器而不是 ID 选择器。

因此而不是：

#full-width { ... }
#wrap { ... }

用途：

.full-width { ... }
.wrap { ... }

---

为清楚起见，您的标记应为：

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="full-width"><!--contents with full width:: 100%--></div>

Answer 2

程序员说得对，你不能多次定义相同的ID，因为ID 必须是唯一的。

您可以使用class 代替ID

试试这个

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="full-width"><!--contents with full width:: 100%--></div>

Answer 3

您在 ID 中重复 DOM <div id="full-width"><div id="wrap> 这是错误的。

使用类<div class="full-width"><div class="wrap>

将css 应用于class，如下所示。

.full-width { /** css code **/ }
.full-width .wrap { /** css code **/ }
.wrap { /** css code **/ }

Answer 4

一个 id 唯一地 标识页面中的一个元素。浏览器会执行一定量的错误恢复，但是当您开始使用 <label for...> 和 JavaScript 根据 ID 从 DOM 中获取元素时，事情肯定会中断。​​

类被提供给属于组的标记元素。改用它们。

<someElement class="one_class another_class">

.one_class {
    /* ... */
}

Answer 5

如果你想在多个对象上应用相同的样式，你应该使用 class 属性。当您在多个对象上使用相同的 id 属性时，您无法通过其 id 访问特定对象（因为它应该由例如 getElementById() 访问）

Answer 6

IDs 是 unique identifiers，唯一标识页面上的各个元素。

对于这种情况，如果您希望拥有多个相互关联的元素，您可以使用classes：http://www.w3.org/TR/html5/dom.html#classes

然后您将使用. 而不是# 设置样式：

<div class="full-width">
   <div class="wrap">...</div>
</div>

div.full-width {
    width:100%;
    ...
}

div.wrap {
    width:950px;
    ...
}

非常感谢！但是我想在一个容器中使用以方便使用如何使用？

根据您想要实现的目标，您可以简单地将所有 .wrap 元素包装在一个 .full-width 容器中：

<div class="full-width">
    <div class="wrap">...</div>
    <div class="wrap">...</div>
    <div class="wrap">...</div>
    <div class="wrap">...</div>
</div>

或者你可以只使用一个.wrap 元素：

<div class="full-width">
    <div class="wrap">
        ...
    </div>
</div>

我假设您还希望将 .wrap 分隔线水平居中：

div.wrap {
    width:950px;
    margin:0 auto;
}

JSFiddle example.

Answer 7

就像我之前的其他人所说，您正在使用 id 标签，这是一个唯一标识符。而您应该使用 class 将样式应用于多个元素。

查看 W3C 将id 定义为：(http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)

元素标识符：id 和 class 属性

属性定义

id = name [CS] 此属性为元素分配名称。这个名字 在文档中必须是唯一的。

class = cdata-list [CS] 这个属性 将一个类名或一组类名分配给一个元素。任何数字 的元素可以被分配相同的类名或名称。多种的 类名必须用空格字符分隔。

更有趣的是，您说您的示例有效，并且在大多数浏览器中都有效。这并不能使它有效甚至是好的 HTML/CSS，只是 一些浏览器会发现开发人员的缺点，并将呈现不符合标准的代码，就好像它符合标准一样。

这是一个永远行不通的例子。您可能知道id 标签可用于命名锚点。例如

<a href="#content">Jump to content</a>
<div id="content">
  some content
</div>
<div id="content">
  some other content
</div>

在这个例子中，命名锚应该链接到哪个元素？在大多数情况下，我会假设它会转到第一个元素。然而，这可能不是开发者想要的。

id 元素的用途不仅仅是将样式应用于元素，W3C 继续声明：

id 属性在 HTML 中有几个作用：

• 作为样式表选择器。
• 作为超文本链接的目标锚。
• 作为从脚本中引用特定元素的一种方式。
• 作为声明的 OBJECT 元素的名称。
• 用于用户代理的通用处理（例如，在将 HTML 页面中的数据提取到数据库中时识别字段， 将 HTML 文档翻译成其他格式等）。
• 另一方面，类属性为元素分配一个或多个类名；该元素可以说属于这些 类。一个类名可以由多个元素实例共享。

class 属性在 HTML 中有几个作用：

• 作为样式表选择器（当作者希望将样式信息分配给一组元素时）。
• 供用户代理进行通用处理。

您应该编写符合标准的代码，以便了解它在符合标准的浏览器中的功能。结果在更广泛的浏览器中更加可预测和稳定，并且更有可能在未来的版本中工作。

编辑：回应 OP 的 cmets：

CSS：

.content {
    width: 950px;
    margin: auto; // Assuming you want to centre this
}

无论你将.content 类应用到什么地方，其宽度都是 950 像素。您不需要在 #top 元素上设置 100% 的宽度，因为它是块级 div，自然会扩展到 100% 的宽度。

HTML：

<div id="top">
    <div id="navigation" class="content">
    </div>
</div>

<div id="main" class="content">
</div>

<div id="footer" class="content">
</div>