Html CSS 中的 id 和 class 有什么区别，我应该什么时候使用它们？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12889362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between id and class in CSS, and when should I use them?
提问by J.K.A.
#main {
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
<div id="main">
Welcome
</div>
Here I gave an idto the divelement and it's applying the relevant CSS for it.
在这里，我给了一个id到div元素，它的应用相关的CSS它。
OR
或者
.main {
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
<div class="main">
Welcome
</div>
Now here I gave a classto the divand it's also doing the same job for me.
现在，这里我给class的div，它也做同样的工作对我来说。
Then what is the exact difference between Idand classand when should I use idand when should I use class.? I am a newbie in CSS and Web-design and a little bit confused while dealing with this.
那么Id和class之间的确切区别是什么，什么时候应该使用id，什么时候应该使用class。？我是 CSS 和网页设计的新手，在处理这个问题时有点困惑。
采纳答案by Rohit Azad
For more info on this click here.
有关这方面的更多信息，请单击此处。
Example
例子
<div id="header_id" class="header_class">Text</div>
#header_id {font-color:#fff}
.header_class {font-color:#000}
(Note that CSS uses the prefix #for IDs and .for Classes.)
（请注意，CSS 使用前缀#表示 ID，使用.表示类。）
Howevercolorwas an HTML 4.01 <font>tag attribute deprecated in HTML 5.
In CSS there is no "font-color", the style is colorso the above should read:
然而，HTML 5 中不推荐使用colorHTML 4.01<font>标签属性。在 CSS 中没有“字体颜色”，样式是color这样的，上面应该是：
Example
例子
<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}
The text would be white.
文本将是白色的。
回答by lc.
Use a classwhen you want to consistently style multiple elementsthroughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links.
Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.
Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jQuery form validator plugin heavily uses classes to define the validation behavior of elements (e.g. required or not, or defining the type of input format)
Examples of class names are: tag, comment, toolbar-button, warning-message, or email.
Use the IDwhen you have a single elementon the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.
Examples of ids are: main-content, header, footer, or left-sidebar.
当您希望在整个页面/站点中一致地设置多个元素的样式时，请使用类。当您拥有或将来可能拥有多个共享相同样式的元素时，类很有用。一个例子可能是“评论”的 div 或用于相关链接的特定列表样式。
此外，一个给定的元素可以有多个与之关联的类，而一个元素只能有一个 id。例如，你可以给一个 div 两个类，它们的样式都会生效。
此外，请注意，除了视觉样式之外，类还经常用于定义行为样式。例如，jQuery 表单验证器插件大量使用类来定义元素的验证行为（例如是否需要，或定义输入格式的类型）
类名的例子有：标签、评论、工具栏按钮、警告消息或电子邮件。
当页面上有一个将采用该样式的元素时，请使用ID。请记住，ID 必须是唯一的。在您的情况下，这可能是正确的选项，因为页面上大概只有一个“主”div。
id 的示例包括：主要内容、页眉、页脚或左侧边栏。
A good way to remember this is a class is a type of itemand the id is the unique name of an itemon the page.
记住这一点的一个好方法是，类是一种项目，而id 是页面上项目的唯一名称。
回答by sureshunivers
ids are unique
ids 是独一无二的
- Each element can have only one
id - Each page can have only one element with that
id
- 每个元素只能有一个
id - 每个页面只能有一个元素
id
classes are NOT unique
classes 不是唯一的
- You can use the same
classon multiple elements. - You can use multiple
classes on the same element.
- 您可以
class在多个元素上使用相同的内容。 - 您可以
class在同一个元素上使用多个es。
Javascript cares
Javascript 关心
JavaScript people are already probably more in tune with the differences between classes and ids. JavaScript depends on there being only one page element with any particular id, or else the commonly used getElementByIdfunction couldn't be depended on.
JavaScript 人员可能已经更了解classes 和ids之间的差异。JavaScript 依赖于只有一个页面元素具有任何特定的id，否则getElementById无法依赖常用功能。
回答by Ross Tollefson
IDs must be unique--you can't have more than one element with the same ID in an html document. Classes can be used for multiple elements. In this case, you would want to use an ID for "main" because it's (presumably) unique--it's the "main" div that serves as a container for your other content and there will only be one.
ID 必须是唯一的——在一个 html 文档中不能有多个具有相同 ID 的元素。类可用于多个元素。在这种情况下，您可能希望为“main”使用一个 ID，因为它（大概）是唯一的——它是“main”div，用作其他内容的容器，并且只有一个。
If you have a bunch of menu buttons or some other element for which you want the styling repeated, you would assign them all to the same class and then style that class.
如果您有一堆菜单按钮或其他一些想要重复样式的元素，您可以将它们全部分配给同一个类，然后为该类设置样式。
回答by Jon P
As pretty much everyone else has said use ID for one-off elements and class for multiple use elements.
几乎所有人都说过将 ID 用于一次性元素，将类用于多次使用元素。
Here is a quick, over simplified example, take HTML and HEAD tags as read
这是一个快速的、过度简化的示例，将 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>
Also, as mentioned in other answers ID are well exposed to javascript, classes less so. However modern javascript frameworks like jQueryleverage class for javascript too
此外，正如其他答案中提到的，ID 很容易接触到 javascript，而类则较少。然而，像jQuery这样的现代 javascript 框架也利用了 javascript 类
回答by Kamran
ID's have the functionality to work as links to particular sections within a webpage. a keyword after # tag will take you to a particular section of the webpage. e.g "http://exampleurl.com#chapter5" in the address bar will take you there when you have a "section5" id wrapped around the chapter 5 section of the page.
ID 具有作为指向网页中特定部分的链接的功能。# 标签后的关键字会将您带到网页的特定部分。例如，“ http://exampleurl.com#chapter5”当您在页面的第 5 章部分有一个“section5”ID 时，地址栏中的“ http://exampleurl.com#chapter5”将带您到那里。
回答by M. Ahmad Zafar
The classattribute can be used with multiple HTML elements/tags and all will take the effect. Where as the idis meant for a single element/tag and is considered unique.
该class属性可以与多个 HTML 元素/标签一起使用，并且都将生效。其中 asid用于单个元素/标签并且被认为是唯一的。
Moreoever the idhas a higher specificity value than the class.
而且id具有比 更高的特异性值class。
回答by Steffen Roller
You can assign a classto many elements. You can also assign more than one classto an element, eg.
您可以将 a 分配class给许多元素。您还可以为class一个元素分配多个，例如。
<button class="btn span4" ..>
in Bootstrap. You can assign the idonly to one.
So if you want to make many elements look the same, eg. list items, you choose class. If you want to trigger certain actions on an element using JavaScript you will probably use id.
在引导程序中。您可以将id唯一的分配给一个。因此，如果您想让许多元素看起来相同，例如。列出项目，您选择class。如果您想使用 JavaScript 在元素上触发某些操作，您可能会使用id.
回答by hjpotter92
A class can be used several times, while an ID can only be used once, so you should use classes for items that you know you're going to use a lot. An example would be if you wanted to give all the paragraphs on your webpage the same styling, you would use classes.
一个类可以多次使用，而一个 ID 只能使用一次，因此您应该将类用于您知道会经常使用的项目。例如，如果您想让网页上的所有段落具有相同的样式，则可以使用类。
Standards specify that any given ID name can only be referenced once within a page or document. Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.
标准规定任何给定的 ID 名称只能在页面或文档中引用一次。当每页仅出现一次时使用 ID。当每页出现一次或多次时使用类。
回答by Srinivas B
id:
ID：
It will identify the unique element of your entire page. No other element should be declared with the same id. The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#".
它将识别整个页面的唯一元素。不应使用相同的 id 声明其他元素。id 选择器用于为单个唯一元素指定样式。id 选择器使用 HTML 元素的 id 属性，并用“#”定义。
class:
班级：
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
类选择器用于为一组元素指定样式。与 id 选择器不同，类选择器最常用于多个元素。
This allows you to set a particular style for many HTML elements with the same class.
这允许您为许多具有相同类的 HTML 元素设置特定样式。
The class selector uses the HTML class attribute, and is defined with a "."
类选择器使用 HTML 类属性，并用“.”定义。
