详细了解CSS中的class与id区别及用法

在 CSS 中，class 和 id 是两个常用的选择器，用于选择 HTML 元素并为其应用样式。下面是一个完整攻略，包含了如何了解 CSS 中的 class 和 id 的区别及用法的过程和两个示例说明。

class 和 id 的区别

class

class 是一种用于标识 HTML 元素的选择器。它可以被多个元素使用，并且一个元素可以拥有多个 class。class 选择器以“.”开头，后面跟着 class 名称。例如：

<div class="box">这是一个盒子</div>

.box {
  background-color: #ccc;
  width: 200px;
  height: 200px;
}

上述代码中，我们创建了一个包含文本的 div 元素，并为其添加了一个名为“box”的 class。我们使用 CSS 中的“.”选择器来选择该 class，并为其应用样式。

id

id 是一种用于标识 HTML 元素的选择器。它只能被一个元素使用，并且一个元素只能拥有一个 id。id 选择器以“#”开头，后面跟着 id 名称。例如：

<div id="box">这是一个盒子</div>

#box {
  background-color: #ccc;
  width: 200px;
  height: 200px;
}

上述代码中，我们创建了一个包含文本的 div 元素，并为其添加了一个名为“box”的 id。我们使用 CSS 中的“#”选择器来选择该 id，并为其应用样式。

class 和 id 的用法

示例一：使用 class 选择器

假设我们有一个 HTML 元素，我们想要为其添加一个 class，并为该 class 应用样式。下面是一个示例：

<div class="box">这是一个盒子</div>

.box {
  background-color: #ccc;
  width: 200px;
  height: 200px;
}

上述代码中，我们创建了一个包含文本的 div 元素，并为其添加了一个名为“box”的 class。我们使用 CSS 中的“.”选择器来选择该 class，并为其应用样式。

示例二：使用 id 选择器

假设我们有一个 HTML 元素，我们想要为其添加一个 id，并为该 id 应用样式。下面是一个示例：

<div id="box">这是一个盒子</div>

#box {
  background-color: #ccc;
  width: 200px;
  height: 200px;
}

上述代码中，我们创建了一个包含文本的 div 元素，并为其添加了一个名为“box”的 id。我们使用 CSS 中的“#”选择器来选择该 id，并为其应用样式。注意，id 选择器只能被一个元素使用，因此在实际使用中应该谨慎使用。