-7 
<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 不超过这个不起作用吗？

4

7 回答 7

6

就像我之前的其他人所说的那样，您正在使用id作为唯一标识符的标签。而您应该使用 aclass跨多个元素应用样式。

查看 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 属性将一个或多个类名分配给一个元素；该元素可以说属于这些类。一个类名可以由多个元素实例共享。

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

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

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

编辑：回应OP的评论：

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>
于 2013-03-22T09:15:58.627 回答
4

ID 是唯一标识符，因此每个文档应该只有 1 个（否则它不是唯一的）。

替换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>
于 2013-03-22T09:01:19.843 回答
1

雅编码员说对了，您不能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>
于 2013-03-22T09:01:41.860 回答
1

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

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

<someElement class="one_class another_class">

.one_class {
    /* ... */
}
于 2013-03-22T09:02:08.157 回答
1

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

对于这种情况，您希望拥有多个相互关联的元素，您可以使用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 示例。

于 2013-03-22T09:04:09.223 回答
0

您在 DOM 中重复 ID<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 **/ }
于 2013-03-22T09:01:44.673 回答
0

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

于 2013-03-22T09:02:37.720 回答