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

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

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

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

或者

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

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

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

那么 身份证和 同学们之间的确切区别是什么，什么时候我应该使用 id，什么时候我应该使用 class。？我在 CSS 和网页设计方面是个新手，在处理这个问题时有点困惑。

465513 次浏览
小开

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

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

小开

class属性可以与多个 HTML 元素/标记一起使用，并且所有元素/标记都将生效。而 id是用于单个元素/标记的，并且被认为是唯一的。

而且 id的特异性高于 class。

小开

您可以为许多元素分配一个 class。您也可以为一个元素分配多个 class，例如。

<button class="btn span4" ..>
引导程序中的 < p > 。您只能将 id分配给一个。 因此，如果您想使许多元素看起来相同，例如列表项，您可以选择 class。如果您希望使用 JavaScript 触发元素上的某些操作，那么您可能会使用 id。译注:
小开

一个类可以使用多次，而一个 ID 只能使用一次，所以对于那些您知道将要使用很多次的项目，您应该使用类。一个例子是，如果你想给你的网页上所有的段落同样的样式，你会使用类。

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

小开
最佳答案

了解更多关于这个 Rel = “ nofollow”点击这里的信息

例子

<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，因此上面的内容应该是:

例子

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


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

文字应该是白色的。

小开

身份证:

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

定义

班级:

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

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

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

小开

id是独一无二的

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

classes 不是唯一的

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

Javascript 在乎

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

小开

这很容易理解:-

当我们必须只对一个属性应用 CSS 属性时，使用 id。

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

常规:-对于独特的结构，如启动 div 和按钮布局，我们使用 id。

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

身份证是轻的，阶级是有点沉重

小开
  • 当你想在整个页面/站点使用 一致地设计多个元素的样式时，使用 同学们。当您拥有(或将来可能拥有)多个共享相同样式的元素时，类是有用的。一个例子可能是“注释”的 div 或某个列表样式用于相关链接。

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

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

    类名的例子有: 标记、注释、工具栏按钮、警告消息或 email

  • 当页面上有一个 单一元素将采用这种样式时，使用 身份证。请记住，ID 必须是唯一的。在您的情况下，这可能是正确的选项，因为页面上大概只有一个“ main”div。

    Id 的例子包括: main-content、 header、 footer 或 left-side bar

记住这一点的一个好方法是页面上的 类是项的类型和 Id 是项的唯一名称。

小开

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

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

例如:

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

内容是一个类，因为它可能也适用于其他一些标记，其中“ veryImportant”只被使用一次，永远不会再次使用。

小开

几乎每个人都说过对一次性元素使用 ID，对多个 use 元素使用 class。

下面是一个快速简化的示例，将 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 类

小开
ID 的功能是作为网页中特定部分的链接。 标签后面的关键字会带你到网页的特定部分。 例如，当你有一个“ section5”id 包裹在第5章的页面部分时，地址栏中的“ http://exampleurl.com#chapter5”会带你到那里。译注:
小开
与 id选择器不同，class选择器最常用于几个元素 这允许您为具有相同类的许多 HTML 元素设置特定的样式。

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

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

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

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

因此，即使你是一个纯粹的 HTML/CSS 开发人员，你也必须尊重每个页面 id的唯一性，这有两个很好的理由:

  1. 清晰度: 无论何时你看到一个 id，你肯定它不存在于同一页面的其他地方
  2. 可伸缩性: 即使你只是在 HTML/CSS 中开发，你也需要考虑到你或者其他开发人员在哪一天会用 JavaScript 来维护和添加你的网站的功能。

提交答案