Question

#main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div id="main">
    Welcome
</div>

这里我给了一个iddiv元素，它为它应用了相关的 CSS。

OR

.main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div class="main">
    Welcome
</div>

现在我给了一个class到div，它也为我做同样的工作。

那么Id和class之间的确切区别是什么，我应该何时使用id以及何时使用class。？我是 CSS 和 Web 设计的新手，在处理这个问题时有点困惑。

241

72

13

10

Answer 1

当您想要在整个页面 / 网站中一致地设置多个元素的样式时，请使用类。当您有或将来可能有多个元素共享相同的样式时，类很有用。一个示例可能是“注释”的 div 或用于相关链接的特定列表样式。

此外，一个给定的元素可以有多个类与之关联，而一个元素只能有一个 id。

此外，请注意，除了视觉样式之外，类通常还用于定义行为样式。例如，jQuery 表单验证器插件大量使用类来定义元素的验证行为（例如，是否需要，或定义输入格式的类型）

类名称的示例有：标记、注释、工具栏按钮、警告消息或电子邮件。

使用ID当你有一个单元素在页面上，将采取的风格。请记住，ID 必须是唯一的。在你的情况下，这可能是正确的选择，因为大概只有一个“主”div 在页面上。

id 的示例有：main-content 、 header 、 footer 或 left-sidebar。

记住这一点的一个好方法是类是一种项目，id 是页面上项目的唯一名称。

Answer 2

ids are unique

每个元素只能有一个id

每个页面只能有一个元素与id

classes are NOT unique

您可以在多个元素上使用相同的class。

您可以在同一元素上使用多个classes。

Javascript 关心

JavaScript 的人可能已经更适应classes 和ids 之间的差异。JavaScript 依赖于只有一个页面元素具有任何特定的id，否则不能依赖常用的getElementById函数。

Answer 3

For more info on thisclick here. Example

<div id="header_id" class="header_class">Text</div>
#header_id {font-color:#fff}
.header_class {font-color:#000}

（请注意，CSS 将前缀#用于 ID，将前缀.用于类。）

然而，color是 HTML 4.01<font>标记属性，在 HTML 5 中弃用。在 CSS 中没有“font-color”，样式是color，所以上面应该是：

Example

<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}

文本将是白色的。

Answer 4

ID 必须是唯一的-在 html 文档中不能有多个具有相同 ID 的元素。类可以用于多个元素。在这种情况下，您希望使用“main”的 ID，因为它是（大概）唯一的-它是“main”div，用作其他内容的容器，并且只有一个。

如果你有一堆菜单按钮或其他一些元素，你想要重复的样式，你会把它们都分配给同一个类，然后样式类。

CSS中id和class的区别是什么我应该在什么时候使用它们