Question

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

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

在这里，我向id元素提供了div，并为其应用了相关的CSS。

或

<style>
    .main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }
</style>
<div class="main">
    Welcome
</div>

现在我在class给了div，而且我也为我做了同样的工作。

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

Answer 1

如果您希望在整个网页/网站中始终如一地设置多个元素，请使用类。当您拥有或可能将来拥有多个共享相同样式的元素时，类非常有用。示例可以是用于相关链接的“评论”或某种列表样式的div。

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

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

类名的示例有：标记，注释，工具栏按钮，警告消息或电子邮件。
如果您将采用该样式的页面上有单个元素，请使用 ID 。请记住，ID必须是唯一的。在你的情况下，这可能是正确的选项，因为在页面上可能只有一个“主”div。

ID的示例包括：main-content，header，footer或left-sidebar。

记住这一点的一个好方法是类是一种商品， ID是商品的唯一名称。

Answer 2

id是唯一的

每个元素只能有一个id
每个页面只能包含一个id

class不是唯一的

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

Javascript关心

JavaScript人员可能已经更加了解class es和id之间的差异。 JavaScript取决于只有一个页面元素包含任何特定的id，否则无法使用常用的getElementById函数。

Answer 3

有关此 click here.

的更多信息

示例

<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中没有“font-color”，样式为color所以上面应该是：

示例

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

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

文字为白色。

Answer 4

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

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

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

Answer 6

ID具有作为网页中特定部分的链接的功能。＃tag后面的关键字会将您带到网页的特定部分。例如＆＃34; http://exampleurl.com#chapter5＆＃34;如果你有一个＆＃34; section5＆＃34;在地址栏中会带你到那里id围绕页面的第5章部分。

Answer 7

class属性可以与多个HTML元素/标签一起使用，所有这些都将起作用。其中id是针对单个元素/标记的，并且被认为是唯一的。

此外，id的特异性值高于class。

Answer 8

您可以为多个元素分配class。您还可以为元素分配多个class，例如

<button class="btn span4" ..>

在Bootstrap中。您只能将id分配给一个。所以如果你想让很多元素看起来一样，比如说。列出项目，您选择class。如果您想使用JavaScript触发元素上的某些操作，您可能会使用id。

Answer 9

一个类可以多次使用，而一个ID只能使用一次，所以你应该使用类，你知道你会经常使用它们。例如，如果您想要在网页上给出相同样式的所有段落，您可以使用类。

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

Answer 10

id：

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

<强>类：

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

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

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

定义

Answer 11

这很容易理解： -

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

id。

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

类。

常规： - 对于像凝视div和按钮布局这样的独特结构，我们使用id。

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

id很轻，班级很重

Answer 12

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

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

例如：

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

内容是一个类，因为它可能适用于其他一些标签以及“veryImportant”仅被使用一次而不再使用。

Answer 13

如果要在之前的好答案中添加某些内容，则应解释为什么id每页必须唯一。这对于初学者来说很重要，因为对同一页面中的多个元素应用相同的id不会触发任何错误，而是具有与class相同的效果。

因此，从HTML / CSS的角度来看，每页id的唯一性并不会产生任何影响。但是从JavaScript的角度来看，每页每个元素有一个id非常重要，因为getElementById()正如其名称所示，通过id标识元素。

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

清晰度：每当您看到ID时，您确定它在同一页面的其他地方不存在
Scalability：即使您只是在HTML / CSS中开发，也需要考虑您或其他开发人员将继续使用JavaScript维护和添加网站功能的那一天。

Answer 14

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

class选择器使用HTML类属性，并使用“。”定义查看它的一个简单方法是id只对一个元素是唯一的。 class最好使用，因为它可以帮助您执行您想要的任务。

Answer 15

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）上测试过。它适用于他们两个。

＆＃34;独特＆＃34;只表示一个元素不能有多个id属性，如类选择器。既不

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

，也不

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

CSS中id和class之间的区别以及何时使用它

15 个答案: