CSS 中的 id 和 class 选择器

在 CSS 中，id 和 class 是两个常用的选择器，它们用于为 HTML 元素添加样式。虽然它们的功能相似，但在使用场景和具体用法上有很大的区别。本文将详细介绍 id 和 class 的区别，并通过实例帮助你更好地理解它们的应用场景，特别是多个 class 的使用。

1. id 选择器

1.1 基本概念

id 选择器用于为页面中唯一的元素定义样式。一个页面中，每个 id 应该是唯一的，不能重复使用。id 选择器以 # 开头，后面跟着 id 的名称。

#header {background-color: #333;color: white;padding: 10px;
}

1.2 使用场景

id 选择器通常用于页面中唯一的元素，比如页面的头部、导航栏、页脚等。由于 id 是唯一的，它可以确保样式只应用于特定的元素。

示例：

<div id="header"><h1>Welcome to My Website</h1>
</div>

在这个例子中，#header 选择器只会应用于 id 为 header 的 div 元素。

2. class 选择器

2.1 基本概念

class 选择器用于为一组具有相同样式的元素定义样式。与 id 不同，class 可以在页面中重复使用。class 选择器以 . 开头，后面跟着 class 的名称。

.button {background-color: #007BFF;color: white;padding: 10px 20px;border: none;cursor: pointer;
}

2.2 使用场景

class 选择器通常用于需要重复使用的样式，比如按钮、卡片、列表项等。通过为多个元素添加相同的 class，可以轻松地为它们应用相同的样式。

示例：

<button class="button">Submit</button>
<button class="button">Cancel</button>

在这个例子中，.button 选择器会应用于所有 class 为 button 的按钮元素。

2.3 多个 class 的使用

一个 HTML 元素可以同时拥有多个 class，通过空格分隔。这种方式可以让我们更灵活地组合样式，避免重复定义相同的 CSS 规则。

示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>/* 定义 .center 类，用于将文本居中 */.center {text-align: center;}/* 定义 .color 类，用于将文本颜色设置为红色 */.color {color: #ff0000;}/* 定义 .highlight 类，用于为文本添加背景高亮 */.highlight {background-color: yellow;}</style>
</head><body><!-- 使用单个 class --><h1 class="center">标题居中</h1><!-- 使用多个 class --><p class="center color">段落居中，颜色为红色。</p><!-- 使用多个 class，并添加额外样式 --><p class="center color highlight">段落居中，颜色为红色，背景高亮。</p>
</body>
</html>

代码解析

<style> 部分：
- 定义了三个 class：
  - .center：将文本内容居中对齐。
  - .color：将文本颜色设置为红色。
  - .highlight：为文本添加黄色背景高亮。
<body> 部分：
- <h1 class="center">：
  - 只使用了 .center 类，因此标题会居中对齐，但没有其他样式。
- <p class="center color">：
  - 同时使用了 .center 和 .color 类，因此段落会居中对齐，并且文本颜色为红色。
- <p class="center color highlight">：
  - 同时使用了 .center、.color 和 .highlight 类，因此段落会居中对齐，文本颜色为红色，并且背景为黄色。

运行效果

标题：
- 文本内容居中对齐。
- 样式：text-align: center;
第一个段落：
- 文本内容居中对齐。
- 文本颜色为红色。
- 样式：text-align: center; color: #ff0000;
第二个段落：
- 文本内容居中对齐。
- 文本颜色为红色。
- 背景为黄色。
- 样式：text-align: center; color: #ff0000; background-color: yellow;

3. id 和 class 的区别

特性	id 选择器	class 选择器
唯一性	页面中唯一，不能重复使用	可以重复使用，适用于多个元素
优先级	优先级高	优先级低
使用场景	用于页面中唯一的元素	用于需要重复使用的样式
选择器符号	`#`	`.`

4. 实际应用中的选择

在实际开发中，选择使用 id 还是 class 取决于具体的需求。以下是一些常见的应用场景：

4.1 使用 id 的场景

页面布局中的主要部分：如头部、导航栏、页脚等。
需要 JavaScript 操作的元素：通过 id 可以方便地使用 document.getElementById() 获取元素。

<div id="navbar"><ul><li>Home</li><li>About</li><li>Contact</li></ul>
</div>

4.2 使用 class 的场景

重复使用的样式：如按钮、卡片、列表项等。
需要为多个元素应用相同样式的情况。
多个 class 组合使用：通过组合多个 class 实现样式的复用和灵活组合。

<div class="card primary"><h2>Card Title</h2><p>This is a primary card.</p>
</div>
<div class="card danger"><h2>Another Card Title</h2><p>This is a danger card.</p>
</div>