CSS中的id和class有什么区别，什么时候应该使用它们？ [重复]

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

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

这里我给id元素添加了一个div，并为其应用了相关的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设计的新手，在处理此问题时有些困惑。

可能重复，stackoverflow.com/q/1215618/425313

ID代表身份（主要），类则是次要。

这不应该标记为重复，因为作者曾问过“ ...何时使用它们”？我在学习网络开发时感到困惑，哪种情况应该包含类vs ID？

#1 楼

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

示例

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

文本为白色。

拒绝投票的原因是此答案的原始版本的有用部分被盗，而当前版本未回答该问题。该答案应删除。

– jcsahnwaldt恢复莫妮卡
16年9月2日在23:36

对我来说，“有帮助的”部分是“（请注意，CSS对ID使用前缀＃，对类使用.。”在链接的答案中没有看到。

–rsethc
17年7月17日在4:42

#2 楼

如果要在整个页面/站点中一致地设置多个元素的样式，请使用一个类。当您拥有（或将来可能会拥有）多个具有相同样式的元素时，类很有用。一个示例可以是“注释”的div或用于相关链接的某种列表样式。

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

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

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

当页面上只有一个采用样式的元素时，请使用ID。请记住，ID必须是唯一的。对于您而言，这可能是正确的选择，因为页面上可能只有一个“主” div。

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

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

假设如果我这样使用

并为其使用不同的CSS，例如.main {// CSS}和.content {// CSS}，那么最终结果应该是什么？

– J.K.A.
2012年10月15日4:56

@ kj7玩一玩jsfiddle.net/PcxQX-您应该尝试不要使用样式冲突的类，尽管这样做确实没有道理，对（“此元素既是红色又是蓝色。”或“该元素都是粗体。而且不大胆。”）？

–lc。
2012年10月15日5:01

我只有一个（id），但很多人是中产阶级。当我只是社交（类）的一小部分（。）时，我使用SSN号（＃）唯一地（id）标识我。

– Pete855217
16年8月13日在13:54

这应该是已经被接受的答案；正如它明确提到何时使用class vs id。

– vikramvi
7月22日4:58

#3 楼

id s是唯一的

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

class es不是唯一的

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

Javascript关心

JavaScript人们可能已经更加了解class es和id s之间的区别。 JavaScript取决于只有一个页面元素带有任何特定的id，否则就不能依赖常用的getElementById函数。

#4 楼

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

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

#5 楼

正如几乎所有人都说过的那样，一次性元素使用ID，多次使用元素使用类。

这是一个简单的快速示例，将HTML和HEAD标记作为read

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

#6 楼

ID具有用作指向网页中特定部分的链接的功能。
＃标记后的关键字会将您带到网页的特定部分。
例如“ http：//exampleurl.com#chapter5如果您在页面的第5章部分中包裹了“ section5” ID，则地址栏中的“”将带您到那里。

#7 楼

class属性可以与多个HTML元素/标签一起使用，所有元素都会生效。其中id表示单个元素/标签，被认为是唯一的。

id的特异性值比class高。

#8 楼

id：

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

class：

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

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

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

#9 楼

这很容易理解：-

id仅在我们将CSS属性应用于一个属性时使用。

class在我们必须在其中使用CSS属性时使用

常规：-对于像注视div和按钮布局这样的独特结构，我们使用id。对于整个页面或项目中的相同CSS，我们使用id使用class

id轻而class稍重

#10 楼

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

从HTML / CSS的角度来看，每页id的唯一性没有意义。但是从JavaScript的角度来看，每页每个元素必须有一个id，这一点很重要，因为getElementById()顾名思义就是通过其id来标识元素。

因此，即使您是纯HTML / CSS开发人员，您必须尊重每页id的唯一性，这有两个充分的理由：

清晰度：每当看到一个id时，您就确定它不在同一页的其他地方

可伸缩性：即使您仅使用HTML / CSS进行开发，也需要考虑您或其他开发人员将继续使用JavaScript维护和向您的网站添加功能的那一天。

#11 楼

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

<button class="btn span4" ..>

。您只能将id分配给一个。
因此，如果要使许多元素看起来相同，例如。清单项目，选择class。如果要使用JavaScript触发元素上的某些操作，则可能会使用id。

#12 楼

一个类可以使用多次，而一个ID只能使用一次，因此您应该对将要使用很多的项目使用类。例如，如果您要给网页上的所有段落赋予相同的样式，则可以使用类。

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

#13 楼

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

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

例如：

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

内容是一个类，因为它可能也适用于其他一些标签，因为“非常重要”仅被使用了一次，不再使用。

#14 楼

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

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

#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）上进行了测试。

“唯一”仅表示一个元素不能具有多个像类选择器这样的id属性。都不

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

也

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

抱歉，我不知道如何放置代码。

–小凤
15年12月22日在22:28

不，“唯一”表示您不能在多个元素上使用相同的ID。您的p和div元素都具有相同ID的示例是错误的。

– McVenco
2015年12月22日在22:49

这可能是可行的，但这是非常不好的做法，而不是行业标准。

–大卫
16-10-15在16:49

编程黑洞网