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>
4

10 回答 10

25

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

例子：

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

现在，您可以div使用 classnamemycolor2一次引用所有 s

.mycolor2{ color: red } //for example - in css

这会将所有具有类的节点设置mycolor2为red.

但是，如果您想专门设置mycolor1为blue，您可以像这样专门针对它：

#mycolor1{ color: blue; }
于 2013-05-30T15:46:21.293 回答
12

阅读属性和 CSS的规范。

  • id必须是唯一的。 class不必是
  • id在 CSS 中具有更高（最高！）的特异性
  • 元素可以有多个无序类（用空格分隔），但只有一个id
  • 查询 DOM 时通过 ID 选择元素更快
  • id可以用作任何元素的锚目标（使用请求的片段）。 name仅适用于锚点 ( <a>)
于 2013-05-30T15:47:39.623 回答
1

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

例如：很多 div 显示的歌词，你可以给他们分配一个类，lyrics因为它们都是相似的。

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

例如：用户电子邮件的输入可以有txtEmailID——其他元素不应该有这个 ID。

于 2013-05-30T15:46:58.983 回答
1

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

  • ID通常在页面中是单一的
  • 类可以有一次或多次出现

在 CSS 或 Javascript 文件中：

  • ID将由字符#访问
  • 该类将由字符访问。
于 2013-05-30T15:48:57.380 回答
1

简单地说：id 对整个 HTML 文档中的一个元素是唯一的，但 class 可以添加到许多元素中。

此外，ID 属性优先于类属性。

如果您打算使用 javascript 或其任何框架，则 id 和 classes 特别有用。

于 2013-05-30T15:49:02.587 回答
0

当您想为一组元素设置属性时使用 class，但只能为一个元素设置 id。

于 2013-05-30T15:46:09.460 回答
0

ID必须是唯一的（一次只能给 DOM 中的一个元素），而类不必是唯一的。您已经发现了 CSS.类和#ID 前缀，差不多就是这些了。

于 2013-05-30T15:46:21.873 回答
0

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

于 2013-05-30T15:47:33.633 回答
0

ID 适用于只出现一次的元素 Like Logo 侧边栏容器

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

#feeds 容器中的 .feed

于 2013-05-30T15:48:49.727 回答
0
  • 引用单个唯一元素时使用 Id 选择器。
  • 类选择器引用一组元素。

例如，如果您有多个看起来相同的按钮，您应该使用 class="mybutton" 来获得一致的样式。

在性能方面：

CSS 选择器从右到左匹配。

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

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

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

于 2013-05-30T15:55:35.377 回答