logo标签列表

使用哪个，<div class="name"> 还是 <div id="name">？

htmlcss
10

我正在学习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>
3
对于这样的草率问题，请先搜索一下 - 一点点的先前知识将有助于更好地提出问题。可以尝试类似“html id vs class”的问题作为起点。 - user2246674
请查看w3c学校关于此处的解释。 - Jens
2
重复问题在这里：这里，这里，这里和这里（可能还有更多）。 - ajp15243
2
@Jens 这不是 w3c 学校，该网站与 W3C 无关。也可以看看 w3fools.com。 - Anthony Grist
1
这显然是一个重复的问题，在该网站右侧的链接部分有4个相同问题的示例。 - Greg
显示剩余3条评论
10个回答
26

他们不是做同样的事情。id用于定位特定元素，classname可用于定位多个元素。

例如：

<div id="mycolor1" class="mycolor2">     hello world </div>
<div class="mycolor2">     hello world2 </div>
<div class="mycolor2">     hello world3 </div>

现在，您可以使用以下代码一次引用所有类名为mycolor2的

元素：

```javascript document.querySelectorAll('.mycolor2') ```
.mycolor2{ color: red } //for example - in css

这将把所有 class 为 mycolor2 的节点设置为 red。

但是，如果你想要将特定的 mycolor1 设置为 blue，可以像这样专门针对它进行设置：

#mycolor1{ color: blue; }
13

查看属性的规范 以及CSS规范。

  • id必须是唯一的，class则不必
  • id在CSS中具有更高（最高！）的特异性
  • 元素可以具有多个非序数类（由空格分隔），但只能有一个id
  • 查询DOM时，通过ID选择元素速度更快
  • id可用作任何元素的锚目标（使用请求片段），而name仅适用于锚点（<a>）
请注意，<a>元素上的name属性已经过时。 - ajp15243
但是我困惑的是，什么时候使用ID。我使用类来为元素设置样式。ID似乎只用作锚点，对吗？因此，如果我有一个要将其样式设置为红色但不链接到它的元素，为什么应该使用ID来为元素设置样式？（你在谈论“选择”一个元素。由谁选择？在哪里选择？） - steve h
@steveh 通过JavaScript或CSS进行选择。在两种情况下，ID的特异性比类更高。ID标识一个元素，但是类可以标识多个元素。 - Explosion Pills
@steveh id 属性有许多用途，正如这个答案所示。它旨在标识页面上的唯一元素，然后可以用于许多事情，例如作为样式选择器，使用URI片段（例如，在该维基百科页面的“目录”框下单击链接，看到URL中放置了#并且由于浏览器找到匹配的id而滚动到该部分），或者作为一种快速/轻松/高效地选择该元素的JavaScript方法，以进行任何您可能编写的JS功能。 - ajp15243
1

当您有多个相似的元素时，请使用类。

例如：许多显示歌词的div，您可以将它们分配一个名为lyrics的类，因为它们都是相似的。

ID必须是唯一的！它们用于针对特定元素进行定位。

例如：用于用户电子邮件的输入框可以具有ID txtEmail --没有其他元素应该具有此ID。

1

对象本身不会改变。这两个关键字之间的主要区别在于用途：

  • ID通常在页面中是单一的。
  • class可以有一个或多个出现。

在CSS或Javascript文件中：

  • ID将通过字符#访问。
  • 类将通过字符.访问。
1
简单来说：id是整个HTML文档中唯一的一个元素，但class可以添加到许多元素中。
此外，ID属性优先于class属性。
如果您计划使用JavaScript或任何其框架，则ids和classes特别有用。
0

当您想为一组元素设置属性时，使用类（class），但ID仅可为一个元素设置。

0

ID必须是唯一的（每次只能分配给DOM中的一个元素），而类则不必如此。您已经发现了CSS中的“.”类和“#”ID前缀，这就是它的全部。

0

ID为元素提供了一个唯一的标识符，以便在JavaScript中对其进行操作。class属性可用于将一组HTML元素视为同一组，特别是在字体、颜色和其他样式属性方面...

0

ID适用于只出现一次的元素 比如 标志侧边栏容器

而Class适用于具有相同UI但可以出现多次的元素。 比如

.feeds在#feeds容器中

0
  • Id选择器用于引用单个唯一元素。
  • 类选择器用于引用一组元素。

例如，如果您有多个外观相同的按钮，则应使用class="mybutton"来实现一致的样式。

就性能而言：

CSS选择器是从右到左匹配的（matched from right to left）。

因此，.myClass应该比#myID“更快”，因为它省略了测试。

对于通常大小的页面，性能速度可以忽略不计，您可能永远不会注意到差异，因此这主要是关于约定的问题。

这里有更多关于为什么CSS是浏览器从右到左匹配CSS选择器的信息。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接