在 CSS 中，class 和 id 选择器都是用来选择 HTML 元素并应用样式的，但它们之间有一些关键的区别：
1. 多次使用:
- class: 可以应用于多个 HTML 元素。这意味着你可以将相同的样式应用于页面上的不同元素。 例如，你可以将
class="highlight"应用于多个段落，使它们都具有相同的突出显示样式。 - id: 在一个 HTML 文档中，每个
id值必须是唯一的。这意味着一个id只能用于一个元素。 例如，id="main-navigation"只能用于一个导航菜单。
2. 优先级:
- id: 比
class具有更高的优先级。如果一个元素同时具有id和class选择器，并且这两个选择器都定义了相同的样式属性，那么id选择器的样式将优先。
3. JavaScript 交互:
- id: 通常用于 JavaScript。
document.getElementById()方法提供了一种快速有效的方法来选择具有特定id的元素，以便进行操作。 - class: 也可以用于 JavaScript，但
document.getElementsByClassName()返回的是一个 HTMLCollection，需要遍历才能访问单个元素，或者使用querySelector(".classname")和querySelectorAll(".classname")。
4. 语法:
- class: 使用点号 (
.) 来选择，例如.highlight。 - id: 使用井号 (
#) 来选择，例如#main-navigation。
总结:
| 特性 | class | id |
|---|---|---|
| 多次使用 | 可以 | 不可以 |
| 优先级 | 低 | 高 |
| JavaScript 交互 | 可以，但效率略低于id | 更常用，效率更高 |
| 语法 | . + class 名称 |
# + id 名称 |
最佳实践:
- 使用
class来对具有相同样式或功能的元素进行分组。 - 使用
id来标识唯一的元素，特别是需要通过 JavaScript 进行交互的元素。 避免过度使用id，因为它会降低代码的灵活性和可重用性。
例如：
<!DOCTYPE html>
<html>
<head>
<title>Class vs ID Example</title>
<style>
.highlight {
color: red;
}
#main-title {
font-size: 2em;
color: blue; /* 这将覆盖 .highlight 的颜色 */
}
</style>
</head>
<body>
<h1 id="main-title" class="highlight">This is a main title</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p class="highlight">This is another highlighted paragraph.</p>
</body>
</html>
在这个例子中，h1 元素同时具有 id="main-title" 和 class="highlight"。由于 id 选择器具有更高的优先级，h1 的颜色将是蓝色，而不是红色。 而两个段落元素只有 class="highlight"，所以它们的颜色将是红色。