Html 使用 <div class="name"> 或 <div id="name"> 哪个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16840473/
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
Which to use <div class="name"> or <div id="name">?
提问by steve h
I am learning HTML. Can someone please tell me what is the difference between class and id and when to use one over the other? They seem to do the same thing
我正在学习 HTML。有人可以告诉我 class 和 id 之间有什么区别以及何时使用一个而不是另一个吗？他们似乎在做同样的事情
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycolor1 {color: red;}
.mycolor2 {color: red;}
</style>
</head>
<body>
<div id="mycolor1"> hello world </div>
<div class="mycolor2"> hello world </div>
</body>
</html>
回答by karthikr
They do not do the same thing.idis used to target a specific element, classnamecan be used to target multiple elements.
他们不做同样的事情。id用于针对特定元素，classname可以用于针对多个元素。
Example:
例子：
<div id="mycolor1" class="mycolor2"> hello world </div>
<div class="mycolor2"> hello world2 </div>
<div class="mycolor2"> hello world3 </div>
Now, you can refer all the divs with classname mycolor2at once using
现在，您可以div使用类名mycolor2一次引用所有s
.mycolor2{ color: red } //for example - in css
This would set all nodes with class mycolor2to red.
这会将所有具有类的节点设置mycolor2为red.
However, if you want to set specifically mycolor1to blue, you can target it specifically like this:
但是，如果您想专门设置mycolor1为blue，您可以像这样专门针对它：
#mycolor1{ color: blue; }
回答by Explosion Pills
Read the spec for the attributesand for CSS.
idmust be unique.classdoes not have to beidhas higher (highest!) specificity in CSS- Elements can have multiple non-ordinal classes (separated by spaces), but only one
id - It is faster to select an element by it's ID when querying the DOM
idcan be used as an anchor target (using the fragment of the request) for anyelement.nameonly works with anchors (<a>)
id必须是唯一的。class不必是id在 CSS 中具有更高（最高！）特异性- 元素可以有多个无序类（用空格分隔），但只能有一个
id - 查询 DOM 时通过 ID 选择元素更快
id可以用作任何元素的锚点目标（使用请求的片段）。name仅适用于锚点 (<a>)
回答by tymeJV
Classes should be used when you have multiple similar elements.
当您有多个相似的元素时，应该使用类。
Ex: Many div's displaying song lyrics, you could assign them a class of lyricssince they are all similar.
例如：许多 div 显示歌词，您可以为它们分配一个类，lyrics因为它们都相似。
ID's must be unique! They are used to target specific elements
ID 必须是唯一的！它们用于针对特定元素
Ex: An input for a users email could have the ID txtEmail-- No other element should have this ID.
例如：用户电子邮件的输入可以有 ID——txtEmail没有其他元素应该有这个 ID。
回答by prichrd
The object itself will not change. The main difference between these 2 keyword is the use:
对象本身不会改变。这两个关键字的主要区别在于用法：
- The IDis usually single in the page
- The classcan have one or many occurences
- 页面中的ID通常是单一的
- 该班可以有一个或多个出现次数
In the CSS or Javascript files:
在 CSS 或 Javascript 文件中：
- The ID will be accessed by the character #
- The class will be accessed by the character .
- ID 将通过字符#访问
- 该类将由字符访问。
回答by Aleks Sekowski
To put it simnply: id is unique to just one element in the whole HTML document, but class can be added to numerous elements.
简单来说：id 对整个 HTML 文档中只有一个元素是唯一的，而 class 可以添加到许多元素中。
Also, ID properties have priority over class properties.
此外，ID 属性优先于类属性。
ids and classes are especially useful if you plan on using javascript or any of its frameworks.
如果您计划使用 javascript 或其任何框架，则 id 和类特别有用。
回答by im_benton
- the Id selector is used when referring to a single unique element.
- The Class selector referrers a group of elements.
- 在引用单个唯一元素时使用 Id 选择器。
- 类选择器引用一组元素。
For example, if you have a multiple buttons that look the same, you should use class="mybutton" to have consistent styling.
例如，如果您有多个看起来相同的按钮，则应使用 class="mybutton" 以具有一致的样式。
In terms of performance:
在性能方面：
CSS selectors are matched from right to left.
CSS 选择器从右到左匹配。
Therefore, .myClass should be "faster" than #myID because it misses out testing.
因此，.myClass 应该比 #myID“更快”，因为它错过了测试。
The performance speed is negligible for normally sized pages and you will probably never notice a difference so it's mostly just about convention.
对于正常大小的页面，性能速度可以忽略不计，您可能永远不会注意到差异，因此它主要是关于约定的。
Here is more info on why css is browsers match css selectors from right to left
这里有更多关于为什么 css 是浏览器从右到左匹配 css 选择器的信息
回答by Sparky
ID provides a unique indentifier for the element, in case you want to manipulate it in JavaScript. The class attribute can be used to treat a group of HTML elements the same, particularly in regards to fonts, colors and other style properties...
ID 为元素提供唯一标识符，以防您想在 JavaScript 中操作它。class 属性可用于对一组 HTML 元素进行相同处理，特别是在字体、颜色和其他样式属性方面...
回答by Sparky
ID is suitable for the elements which appears only once Like Logo sidebar container
ID 适用于只出现一次的元素 Like Logo 侧边栏容器
And Class is suitable for the elements which has same UI but they can be appear more than once. Like
Class 适用于具有相同 UI 但可以多次出现的元素。喜欢
.feed in the #feeds Container
#feeds 容器中的 .feed
回答by Faridzs
class is used when u want to set properties for a group of elements, but id can be set for only one element.
当您想为一组元素设置属性时使用 class，但只能为一个元素设置 id。
回答by Bojangles
ID's mustbe unique (only be given to one element in the DOM at a time), whereas classes don't have to be. You've already discovered the CSS .class and #ID prefixes, so that's pretty much it.
ID必须是唯一的（一次只能分配给 DOM 中的一个元素），而类则不必如此。您已经发现了 CSS.类和#ID 前缀，仅此而已。
