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标记，该标记是唯一标识符。而您应该使用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标签可用于命名锚点。 E.g。

<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>

Answer 2

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 3

Ya编码员说你不能多次定义同一个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 4

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

将类提供给作为组的一部分的标记元素。请改用它们。

<someElement class="one_class another_class">

.one_class {
    /* ... */
}

Answer 5

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 6

您正在重复ID {1}}的ID错误。

使用课程<div id="full-width"><div id="wrap>

将<div class="full-width"><div class="wrap>应用于css，如下所示。

class

Answer 7

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

为什么不应该重复id？

7 个答案: