css中class和id选择器有什么区别？

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