Html id 和 class 有什么区别？

What's the difference between an id and a class?

提问by johnnietheblack

What's the difference between <div class="">and <div id="">when it comes to CSS? Is it alright to use <div id="">?

CSS<div class="">和<div id="">CSS之间有什么区别？可以用<div id="">吗？

I see different developers doing this in both ways, and since I'm self taught, I've never really figured it out.

我看到不同的开发人员以两种方式这样做，而且由于我是自学的，所以我从来没有真正弄清楚过。

回答by Tyson

idsmust be unique where as classcan be applied to many things. In CSS, ids look like #elementIDand classelements look like .someClass

ids必须是唯一的，class可以应用于许多事情。在 CSS 中，ids 看起来像#elementID，class元素看起来像.someClass

In general, use idwhenever you want to refer to a specific element and classwhen you have a number of things that are all alike. For instance, common idelements are things like header, footer, sidebar. Common classelements are things like highlightor external-link.

一般而言，id当您想要引用特定元素并且class有许多相似的事物时，请使用。例如，常见id元素是诸如header, footer, 之类的东西sidebar。常见class元素是像highlight或这样的东西external-link。

It's a good idea to read up on the cascade and understand the precedence assigned to various selectors: http://www.w3.org/TR/CSS2/cascade.html

阅读级联并了解分配给各种选择器的优先级是个好主意：http: //www.w3.org/TR/CSS2/cascade.html

The most basic precedence you should understand, however, is that idselectors take precedence over classselectors. If you had this:

但是，您应该了解的最基本的优先级是id选择器优先于class选择器。如果你有这个：

<p id="intro" class="foo">Hello!</p>

and:

和：

#intro { color: red }
.foo { color: blue }

The text would be red because the idselector takes precedence over the classselector.

文本将是红色的，因为id选择器优先于class选择器。

回答by Sampson

Perhaps an analogy will help understanding the difference:

也许一个类比将有助于理解差异：

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

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, such as Biology. But it's never acceptable to put multiple students under one student ID.

可以将多个学生放在一个班级标题下，例如生物学。但是将多个学生放在一个学生ID下是绝对不能接受的。

When giving Rulesover the school intercom system, you can give Rulesto a Class:

当给出的规则在学校对讲系统，你可以给规则一个类：

"Tomorrow, all students are to wear a red shirt to Biology class."

“明天，所有学生都要穿红衬衫去生物课。”

.Biology {
  color: red;
}

Or you can give rules to a Specific Student, by calling his unique ID:

或者您可以通过调用他的唯一ID来为特定学生提供规则：

"Jonathan Sampson is to wear a green shirt tomorrow."

“乔纳森桑普森明天要穿绿色衬衫。”

#JonathanSampson {
  color: green;
}

In this case, Jonathan Sampson is receiving two commands: one as a student in the Biology class, and another as a direct requirement. Because Jonathan was told directly, via the id attribute, to wear a green shirt, he will disregard the earlier request to wear a red shirt.

在这种情况下，乔纳森·桑普森 (Jonathan Sampson) 收到两条命令：一条是作为生物课的学生，另一条是直接要求。因为 Jonathan 通过 id 属性被直接告知要穿绿色衬衫，所以他将无视之前的穿红色衬衫请求。

The more specific selectors win.

更具体的选择器获胜。

回答by Konstantin Tarkus

Where to use an ID versus a class

在哪里使用 ID 与类

The simple difference between the two is that while a class can be used repeatedly on a page, an ID must only be used once per page. Therefore, it is appropriate to use an ID on the div element that is marking up the main content on the page, as there will only be one main content section. In contrast, you must use a class to set up alternating row colors on a table, as they are by definition going to be used more than once.

两者之间的简单区别在于，虽然一个类可以在一个页面上重复使用，但一个 ID 每页只能使用一次。因此，在标记页面主要内容的 div 元素上使用 ID 是合适的，因为只有一个主要内容部分。相比之下，您必须使用一个类在表格上设置交替的行颜色，因为根据定义，它们将被多次使用。

IDs are an incredibly powerful tool. An element with an ID can be the target of a piece of JavaScript that manipulates the element or its contents in some way. The ID attribute can be used as the target of an internal link, replacing anchor tags with name attributes. Finally, if you make your IDs clear and logical, they can serve as a sort of “self documentation” within the document. For example, you do not necessarily need to add a comment before a block stating that a block of code will contain the main content if the opening tag of the block has an ID of, say, "main", "header", "footer", etc.

ID 是一个非常强大的工具。具有 ID 的元素可以成为一段 JavaScript 的目标，该 JavaScript 以某种方式操纵该元素或其内容。ID 属性可以用作内部链接的目标，用名称属性替换锚标记。最后，如果您使 ID 清晰且合乎逻辑，它们可以作为文档中的一种“自我文档”。例如，如果块的开始标记的 ID 为“main”、“header”、“footer”，则您不一定需要在块之前添加注释，说明该代码块将包含主要内容“， 等等。

回答by Luc M

An id must be unique in the whole page.

一个 id 在整个页面中必须是唯一的。

A class may apply to many elements.

一个类可能适用于许多元素。

Sometimes, it's a good idea to use ids.

有时，使用 id 是个好主意。

In a page, you usually have one footer, one header...

在一个页面中，您通常有一个页脚、一个页眉...

Then the footer may be into a div with an id

那么页脚可能会变成一个带有 id 的 div

<div id="footer" class="...">

<div id="footer" class="...">

and still have a class

还有一堂课

回答by jjclarkson

A CLASSshould be used for multiple elements that you want the same styling for. An IDshould be for a unique element. See this tutorial.

一类应该用于您想为同一样式的多个元素。的ID应该是一个唯一的元件。请参阅本教程。

You should refer to the W3C standardsif you want to be a strict conformist, or if you want your pages to be validatedto the standards.

如果您想成为一个严格的遵从者，或者如果您希望您的页面按照标准进行验证，您应该参考W3C标准。

回答by cletus

IDs are unique. Classes aren't. Elements can also have multiple classes. Also classes can be dynamically added and removed to an element.

ID 是唯一的。类不是。元素也可以有多个类。类也可以动态添加和删除到元素。

Anywhere you can use an ID you could use a class instead. The reverse is not true.

在任何可以使用 ID 的地方，您都可以使用类来代替。反过来就不对了。

The convention seems to be to use IDs for page elements that are on every page (like "navbar" or "menu") and classes for everything else but this is only convention and you'll find wide variance in usage.

约定似乎是为每个页面上的页面元素（如“导航栏”或“菜单”）使用 ID，为其他所有内容使用类，但这只是约定，您会发现使用方式存在很大差异。

One other difference is that for form input elements, the <label>element references a field by ID so you need to use IDs if you're going to use <label>. is an accessibility thing and you really should use it.

另一个区别是，对于表单输入元素，该<label>元素通过 ID 引用字段，因此如果要使用<label>. 是一个可访问性的东西，你真的应该使用它。

In years gone by IDs were also preferred because they're easily accessible in Javascript (getElementById). With the advent of jQuery and other Javascript frameworks this is pretty much a non-issue now.

在过去的几年里，ID 也是首选，因为它们很容易在 Javascript (getElementById) 中访问。随着 jQuery 和其他 Javascript 框架的出现，这现在几乎不是问题。

回答by JR.

Classes are like categories. Many HTML elements can belong to a class, and an HTML element can have more than one class. Classes are used to apply general styles or styles that can be applied across multiple HTML elements.

类就像类别。许多 HTML 元素可以属于一个类，而一个 HTML 元素可以有多个类。类用于应用通用样式或可以跨多个 HTML 元素应用的样式。

IDs are identifiers. They're unique; no one else is allowed to have that same ID. IDs are used to apply unique styles to an HTML element.

ID 是标识符。他们是独一无二的；不允许其他人拥有相同的 ID。ID 用于将唯一样式应用于 HTML 元素。

I use IDs and classes in this fashion:

我以这种方式使用 ID 和类：

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

In this example, the header and content sections can be styled via #header and #content. Each section of the content can be applied a common style through #content .section. Just for kicks, I added a "special" class for the middle section. Suppose you wanted a particular section to have a special styling. This can be achieved with the .special class, yet the section still inherits the common styles from #content .section.

在此示例中，标题和内容部分可以通过 #header 和 #content 设置样式。内容的每个部分都可以通过#content .section 应用一种通用样式。只是为了踢球，我为中间部分添加了一个“特殊”类。假设您希望特定部分具有特殊样式。这可以通过 .special 类来实现，但该部分仍然继承了#content .section 的通用样式。

When I do JavaScript or CSS development, I typically use IDs to access/manipulate a very specific HTML element, and I use classes to access/apply styles to a broad range of elements.

当我进行 JavaScript 或 CSS 开发时，我通常使用 ID 来访问/操作一个非常特定的 HTML 元素，我使用类来访问/应用样式到范围广泛的元素。

回答by annakata

CSS is object oriented. ID says instance, class says class.

CSS 是面向对象的。ID 表示实例，类表示类。

回答by Sandeep Choudhary

When applying CSS, apply it to a class and try to avoid as much as you can to an id. The ID should only be used in JavaScript to fetch the element or for any event binding.

应用 CSS 时，将其应用到类，并尽量避免应用到 id。该 ID 只能在 JavaScript 中用于获取元素或用于任何事件绑定。

Classes should be used to apply CSS.

应该使用类来应用 CSS。

Sometimes you do have to use classes for event binding. In such cases, try to avoid classes which are being used for applying CSS and rather add new classes which doesn't have corresponding CSS. This will come to help when you need to change the CSS for any class or change the CSS class name all together for any element.

有时您必须使用类进行事件绑定。在这种情况下，尽量避免用于应用 CSS 的类，而是添加没有相应 CSS 的新类。当您需要更改任何类的 CSS 或更改任何元素的 CSS 类名称时，这将有所帮助。

回答by duggi

CSS selector space actually allows for conditional id style:

CSS 选择器空间实际上允许条件 id 样式：

h1#my-id {color:red}
p#my-id {color:blue}

will render as expected. Why would you do this? Sometimes IDs are generated dynamically, etc. A further use has been to render titles differently based on a high-level ID assignment:

将按预期呈现。你为什么要这样做？有时 ID 是动态生成的，等等。进一步的用途是根据高级 ID 分配以不同方式呈现标题：

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Personally, I prefer longer classname selectors:

就个人而言，我更喜欢更长的类名选择器：

body#list-page .title-block > h1 {font-size:56px}

as I find using nested IDs to differentiate treatment to be a bit perverse. Just know that as developers in the Sass/SCSSworld get their hands on this stuff, nested IDs are becoming the norm.

因为我发现使用嵌套 ID 来区分处理有点不正常。只要知道随着Sass/ SCSS世界的开发人员开始接触这些东西，嵌套 ID 正在成为常态。

Finally, when it comes to selector performance and precedence, ID tends to win out. This is a whole other subject.

最后，在选择器性能和优先级方面，ID 往往胜出。这是一个完全不同的主题。