HTML 元素的 class 和 id 属性有何区别？

在 HTML 中， class 和 id 是两种非常重要的属性，它们被广泛用于选择元素并应用样式或者与 JavaScript 进行交互。虽然它们都可用于标识元素，但它们之间存在一些关键的区别。本文将详细介绍这些区别，并通过一系列示例来展示如何有效地使用这两种属性。

基本概念和作用

ID

• 定义：id 属性用于唯一标识文档中的一个元素。
• 用途：可以用来在 CSS 中选择一个特定的元素，也可以用 JavaScript 来访问该元素。
• 规则：在一个文档中，id 必须是唯一的。
• 选择器：CSS 中使用 # 加上 id 名称来选择带有该 id 的元素。

Class

• 定义：class 属性用于定义元素所属的一个或多个类。
• 用途：可以用来选择一组具有相同样式的元素，同样适用于 JavaScript 操作。
• 规则：class 可以在一个文档中重复使用。
• 选择器：CSS 中使用 . 加上 class 名称来选择带有该 class 的元素。

示例一：使用 id 选择器

<div id="uniqueElement">这是一个具有唯一 ID 的元素。</div>

<style>
  #uniqueElement {
     
     
    color: red;
  }
</style>

说明

在这个示例中，我们创建了一个具有唯一 id 的 <div> 元素，并使用 CSS #uniqueElement 选择器为其设置了红色文本。

示例二：使用 class 选择器

<div class="commonStyle">这是第一个元素。</div>
<div class="commonStyle">这是第二个元素。</div>

<style>
  .commonStyle {
     
     
    font-weight: bold;
  }
</style>

说明

在这个例子中，我们为两个 <div> 元素分配了相同的 class，然后使用 .commonStyle 选择器将它们的字体加粗。

示例三：使用 id 和 class 的结合

<div id="special" class="c