当前位置：首页 > article >正文

CSS 中的 id 和 class 选择器

article 2025/1/27 12:07:00

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