CSS Div 的类与 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/84378/
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
Div's class vs id
提问by Paul
When using divswhen is it best to use a classvs id?
什么divs时候使用classvs最好id？
Is it best to use class, on say font variant or elements within the html? Then use idfor the structure/containers?
最好class在 html 中的字体变体或元素上使用？然后id用于结构/容器？
This is something I've always been a little uncertain on, any help would be great.
这是我一直有点不确定的事情，任何帮助都会很棒。
回答by Jim
Use idto identify elements that there will only be a single instance of on a page. For instance, if you have a single navigation bar that you are placing in a specific location, use id="navigation".
使用id识别元素只会出现在页面上的单个实例。例如，如果您将单个导航栏放置在特定位置，请使用id="navigation".
Use classto group elements that all behave a certain way. For instance, if you want your company name to appear in bold in body text, you might use <span class='company'>.
用于class对以特定方式运行的元素进行分组。例如，如果您希望公司名称在正文中以粗体显示，您可以使用<span class='company'>.
回答by Sean McMains
The most important thing to understand is that IDs have to be unique: only one element with a given ID should exist within a page. Thus, if you're wanting to refer to a specific page element, that's often the best thing to use.
要理解的最重要的事情是 ID 必须是唯一的：一个页面中应该只存在一个具有给定 ID 的元素。因此，如果您想引用特定的页面元素，这通常是最好的选择。
If you have multiple elements that are in some way similar, you should use the elements class to identify them.
如果您有多个在某些方面相似的元素，您应该使用元素类来识别它们。
One very useful, surprisingly little known fact is that you can actually apply multiple classes to a single element by putting spaces between the class names. Thus, if you posted a question that was written by the currently logged in user, you might identify it with <div class="question currentAuthor">.
一个非常有用但令人惊讶的鲜为人知的事实是，您实际上可以通过在类名之间放置空格来将多个类应用于单个元素。因此，如果您发布了由当前登录用户编写的问题，您可以使用<div class="question currentAuthor">来标识它。
回答by Sampson
Think of University.
想想大学。
<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />
Student IDcards are distinct. No two students on campus will have the same student IDcard. However, many students can and will share at least one Classwith each other.
学生ID卡是不同的。没有两个学生在校园里都会有相同的学生ID卡。但是，许多学生可以并且将会彼此共享至少一个班级。
It's okay to put multiple students under one Classtitle, Biology 101. But it's never acceptable to put multiple students under one student ID.
将多个学生放在一个班级名称 Biology 101下是可以的。但将多个学生放在一个学生ID下是绝对不能接受的。
When giving Rulesover the school intercom system, you can give Rulesto a Class:
当给出的规则在学校对讲系统，你可以给规则一个类：
"Would the Biology class please wear Red Shirts tomorrow?"
“明天生物课可以穿红衫吗？”
.BiologyClass {
shirt-color:red;
}
Or you can give rules to a Specific Student, by calling his unique ID:
或者您可以通过调用他的唯一ID来为特定学生提供规则：
"Would Jonathan Sampson please wear a Green Shirt tomorrow?"
“请乔纳森·桑普森明天穿一件绿色衬衫好吗？”
#JonathanSampson {
shirt-color:green;
}
回答by Oli
IDs must be unique but in CSS they also take priority when figuring out which of two conflicting instructions to follow.
ID 必须是唯一的，但在 CSS 中，在确定要遵循的两个冲突指令中的哪一个时，它们也具有优先权。
<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}
The text would be white.
文本将是白色的。
回答by Mike Farmer
classes are great when you want to apply similar styles to many different divs or elements. ids are good when you want to address a specific element for formatting or for updating with javascript.
当您想将相似的样式应用于许多不同的 div 或元素时，类非常有用。当您想要处理特定元素以进行格式化或使用 javascript 更新时，id 非常有用。
回答by Dave Rutledge
An additional benefit to using an ID is the ability to target it in an anchor tag:
使用 ID 的另一个好处是能够在锚标签中定位它：
<h2 id="CurrentSale">Product I'm selling</h2>
Will allow you to in some other place link directly to that spot on the page:
将允许您在其他地方直接链接到页面上的那个位置：
<a href="#CurrentSale">the Current Sale</a>
A common use for this would be to give each headline on a blog a datestamped ID (say id="date20080408") which would allow you to specifically target that section of the blog page.
一个常见的用途是为博客上的每个标题提供一个带日期戳的 ID（比如 id="date20080408"），这将允许您专门定位博客页面的该部分。
It is also important to remember that there are more restricted naming rules for ids, primarily that they can't start with a number. See similar SO question: What is a valid value for id attributes in html
同样重要的是要记住，id 的命名规则有更多限制，主要是它们不能以数字开头。请参阅类似的 SO 问题：What is a valid value for id attributes in html
回答by Mecki
The HTML standard itself answers your question:
HTML 标准本身回答了您的问题：
No two objects may have the same ID, but an arbitrarily amount of objects may have the same class.
没有两个对象可能具有相同的 ID，但任意数量的对象可能具有相同的类。
So if you want to apply certain CSS style attributes to a single DIV only, that would be an ID. If you want certain style attributes to apply to multiple DIVs, that must be a class.
因此，如果您只想将某些 CSS 样式属性应用于单个 DIV，那就是一个 ID。如果您希望某些样式属性应用于多个 DIV，则必须是一个类。
Note that you can mix both. You can make two DIVs belong to the same class, but give them different IDs. You can then apply the style common to both to the class, and the things specific to either one to their ID. The browser will first apply the class style and then the ID style, so ID styles can overwrite whatever a class has set before.
请注意，您可以将两者混合使用。你可以让两个 DIV 属于同一个类，但给它们不同的 ID。然后，您可以将两者通用的样式应用于类，并将特定于其中一个的事物应用于其 ID。浏览器将首先应用类样式，然后应用 ID 样式，因此 ID 样式可以覆盖类之前设置的任何内容。
回答by Joel Coehoorn
Some other things to keep in mind:
其他一些注意事项：
- When using ASP.Net you don't have complete control over the ID of elements, so you pretty much have to use class (note that this is less true than it once was).
It's best to use neither, when you can help it. Instead, specify the element typeand it's parent's type. For example, an unordered list contained inside div with the navarea class could be singled out this way:
div.NavArea ul { /* styles go here */ }
- 使用 ASP.Net 时，您无法完全控制元素的 ID，因此您几乎必须使用类（请注意，这不像以前那样真实）。
当您可以提供帮助时，最好两者都不使用。相反，指定元素类型及其父元素类型。例如，包含在 div 中的具有 navarea 类的无序列表可以通过这种方式挑出：
div.NavArea ul { /* styles go here */ }
Now you can style the logical divisionfor much of your entire navarea with one class application.
现在，您可以使用一个类应用程序为整个导航区的大部分设置逻辑分区样式。
回答by James Curran
IDs should be unique. CLASSes should be shared. So, if you have some CSS formatting that will be applied to multiple DIV, use a class. If just one (as a requirement, not as happenstance), use an ID.
ID 应该是唯一的。类应该共享。因此，如果您有一些 CSS 格式将应用于多个 DIV，请使用类。如果只有一个（作为要求，而不是偶然），请使用 ID。
回答by Steve Perks
I think we all know what class is, but if you think of IDs as identifiers rather than styling tools, you wont go far wrong. You need an identifier when trying to target something and if you have more than one item with the same ID, you can no longer identify it...
我想我们都知道什么是类，但是如果您将 ID 视为标识符而不是样式工具，那么您就不会大错特错。尝试定位某些东西时，您需要一个标识符，如果您有多个具有相同 ID 的项目，则无法再识别它...
When it comes to writing your css for IDs and CLASSes, it's beneficial to use minimal css classes as far as possible and try not to get too heavy with the IDs until you HAVE to, otherwise you'll constantly be aiming to write stronger declarations and soon have a css file full of !important.
在为 ID 和 CLASSes 编写 css 时，尽可能使用最少的 css 类是有益的，并且在必须之前尽量不要过多使用 ID，否则您将一直致力于编写更强大的声明和很快就会有一个充满 !important 的 css 文件。
