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

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

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

或者

.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 设计的新手，在处理这个问题时有点困惑。

4

15 回答 15

235

  • 当您希望在整个页面/站点中一致地设置多个元素的样式时，请使用类。当您拥有或将来可能拥有多个具有相同样式的元素时，类很有用。一个示例可能是“评论”的 div 或用于相关链接的某种列表样式。

    此外，一个给定的元素可以有多个与之关联的类，而一个元素只能有一个 id。例如，你可以给一个 div 两个类，它们的样式都会生效。

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

    类名的示例有：标签、评论、工具栏按钮、警告消息或电子邮件。

  • 当页面上有一个将采用该样式的元素时，请使用ID 。请记住，ID 必须是唯一的。在您的情况下，这可能是正确的选择，因为页面上可能只有一个“主”div。

    id 的示例包括：主要内容、页眉、页脚或左侧边栏。

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

于 2012-10-15T04:45:21.700 回答
71

ids 是唯一的

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

classes 不是唯一的

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

Javascript 关心

classJavaScript 人可能已经更熟悉es 和ids之间的差异了。JavaScript 依赖于只有一个页面元素具有任何特定的 ，否则无法依赖id常用的功能。getElementById

于 2012-10-15T04:44:20.893 回答
16

有关此的更多信息，请单击此处。

例子 

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

（请注意，CSS 使用前缀#表示 ID，使用前缀.表示类。）

然而 color，在 HTML 5 中不推荐使用HTML 4.01<font>标记属性。在 CSS 中没有“字体颜色”，样式是color这样的，上面应该是：

例子 

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}

文本将是白色的。

于 2012-10-15T04:42:26.983 回答
10

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

如果您有一堆菜单按钮或其他一些您想要重复样式的元素，您可以将它们全部分配给同一个类，然后为该类设置样式。

于 2012-10-15T04:40:40.087 回答
5

正如几乎所有其他人所说的那样，将 ID 用于一次性元素，将类用于多个使用元素。

这是一个简单的快速示例，将 HTML 和 HEAD 标签视为已读

<body>
    <div id="leftCol">
        You will only have one left column
    </div>
    <div id="mainContent">
        Only one main content container, but.....
        <p class="prettyPara">You might want more than one pretty paragraph</p>
        <p>This one is boring and unstyled</p>
        <p class="prettyPara">See I told you, you might need another!</p>
    </div>
    <div id="footer">
        Not very HTML5 but you'll likely only have one of these too.
    </div>
</body>

此外，正如其他答案中提到的，ID 很容易暴露于 javascript，类则更少。然而，像jQuery这样的现代 javascript 框架也利用了 javascript 类

于 2012-10-15T04:52:19.430 回答
4

ID 具有作为指向网页中特定部分的链接的功能。# 标记后的关键字会将您带到网页的特定部分。例如，地址栏中的“ http://exampleurl.com#chapter5 ”将带您到页面的第 5 章部分周围有一个“section5”ID。

于 2014-07-08T17:22:39.667 回答
2

该class属性可以与多个 HTML 元素/标签一起使用，并且都会生效。其中id是针对单个元素/标签的，并且被认为是唯一的。

此外，id比 具有更高的特异性值class。

于 2012-10-15T04:40:41.300 回答
2

ID：

它将识别整个页面的独特元素。不应使用相同的 id 声明其他元素。id 选择器用于为单个唯一元素指定样式。id 选择器使用 HTML 元素的 id 属性，并用“#”定义。

班级：

类选择器用于指定一组元素的样式。与 id 选择器不同，类选择器最常用于多个元素。

这允许您为具有相同类的许多 HTML 元素设置特定样式。

类选择器使用 HTML 类属性，并用“.”定义。

于 2012-10-15T04:43:38.943 回答
2

如果对前面的好答案有什么要补充的，那就是解释为什么id每页 s 必须是唯一的。这对于初学者来说很重要，因为将相同的内容应用于id同一页面中的多个元素不会触发任何错误，而是具有与class.

所以从 HTML/CSS 的角度来看，id每个页面的唯一性是没有意义的。但是从 JavaScript 的角度来看，id每个页面的每个元素都有一个是很重要的，因为getElementById()正如它的名字所暗示的那样，通过它们id的 s 来标识元素。

因此，即使您是纯 HTML/CSS 开发人员，您也必须尊重id每页 s 的唯一性，原因有两个：

  1. 清晰性：每当您看到一个 id 时，您确定它在同一页面的其他地方不存在
  2. 可扩展性：即使您只使用 HTML/CSS 进行开发，您也需要考虑到您或其他开发人员将继续使用 JavaScript 维护和添加网站功能的那一天。
于 2016-08-10T11:06:33.767 回答
1

您可以将 a 分配class给许多元素。class您还可以为一个元素分配多个，例如。

<button class="btn span4" ..>

在引导程序中。您可以将id唯一分配给一个。因此，如果您想让许多元素看起来相同，例如。列出项目，您选择class. 如果您想使用 JavaScript 触发元素上的某些操作，您可能会使用id.

于 2012-10-15T04:40:48.617 回答
1

一个类可以多次使用，而一个 ID 只能使用一次，因此您应该将类​​用于您知道会经常使用的项目。一个例子是，如果您想为网页上的所有段落提供相同的样式，您将使用类。

标准规定任何给定的 ID 名称只能在页面或文档中引用一次。当每页仅出现一次时使用 ID。当每页出现一次或多次时使用类。

于 2012-10-15T04:41:09.773 回答
1

这很容易理解：-

当我们必须将 CSS 属性仅应用于一个属性时，使用 id。

当我们必须在同一页面或不同页面的许多位置使用 CSS 属性时，使用 class。

一般：- 对于像盯着 div 和按钮布局这样的独特结构，我们使用 id 。

对于整个页面或项目中的相同 CSS，我们使用类

id很轻，class有点重

于 2012-10-15T04:44:22.863 回答
1

一种简单的看待它的方法是，一个 id 仅对一个元素是唯一的。

一个类不是唯一的并且适用于多个元素。

例如：

<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>

内容是一个类，因为它可能适用于其他一些标签以及“非常重要”仅被使用一次且永远不会再次使用的地方。

于 2012-10-15T04:51:36.983 回答
-2

与id选择器不同，选择class器最常用于多个元素。
这允许您为具有相同类的许多 HTML 元素设置特定样式。

选择class器使用 HTML 类属性，并用“.”定义。
一种简单的看待它的方法是，一个 id 仅对一个元素是唯一的。class更好用，因为它可以帮助您执行您想要的任何操作。

于 2015-10-03T05:06:12.037 回答
-4

id 选择器可用于更多元素。这是示例：

CSS：

#t_color{
    color: red;
}
#f_style{
    font-family: arial;
    font-size: 20px;
}

html:

<p id="t_color"> test only </p>
<div id="t_color">the box text</div>

我在 Internet Explorer（11.0 版）和 Chrome（47.0 版）上进行了测试。它适用于他们两个。

“唯一”仅表示一个元素不能有多个 id 属性，如类选择器。两者都不

<p id="t_color f_style">...</p>

也不

<p id="t_color" id="f_style">...</p>
于 2015-12-22T22:22:29.887 回答