CSS id 和 class 详解

CSS中的id和class是用于选择和样式化HTML元素的核心属性，二者在功能、优先级、使用场景等方面有显著区别。以下从定义、区别、用法、优先级及示例等方面进行全面解析：

一、`id` 和 `class` 的定义

id（唯一标识符）

作用：为HTML元素分配一个唯一的标识符，用于精确选择和样式化单个元素。
语法：<div id="header">...</div>
特点：
- 同一页面中，id值必须唯一（不可重复）。
- 常用于JavaScript操作（如document.getElementById()）或锚点跳转（如<a href="#header">）。

class（类选择器）

作用：为HTML元素分配一个或多个类名，用于批量选择和样式化多个元素。
语法：<div class="box highlight">...</div>
特点：
- 同一页面中，class值可重复使用。
- 一个元素可同时属于多个类（用空格分隔，如class="box highlight"）。

二、`id` 和 `class` 的核心区别

特性	`id`	`class`
唯一性	同一页面中必须唯一	可重复使用
选择器优先级	高于`class`（具体见优先级规则）	低于`id`，但可通过组合提升优先级
用途	精确选择单个元素（如页面标题）	批量选择多个元素（如按钮样式）
JavaScript	常用`getElementById()`	常用`getElementsByClassName()`

三、`id` 和 `class` 的CSS用法

id 的CSS选择器

使用#前缀选择元素：
css #header { background-color: #f0f0f0; padding: 20px; }
示例：
html ¨K12K

class 的CSS选择器

使用.前缀选择元素：
css .box { border: 1px solid #ccc; margin: 10px; } .highlight { background-color: yellow; }
示例（多类组合）：
html ¨K13K

四、CSS优先级规则

CSS选择器的优先级由以下因素决定（从高到低）：

内联样式（如style="color: red"）：优先级最高。
id 选择器（如#header）：高于class和元素选择器。
class、属性、伪类选择器（如.box、[type="text"]、:hover）：优先级中等。
元素选择器、伪元素选择器（如div、::before）：优先级最低。

优先级计算规则：

每个选择器类型对应一个权重值（id=100，class=10，元素=1）。
权重值大的选择器优先级更高，权重值相同时，后定义的样式生效。

示例：

#header { color: red; }    /* 权重：100 */
.title { color: blue; }    /* 权重：10 */
div { color: green; }      /* 权重：1 */

若同时应用上述样式，#header的优先级最高，div的优先级最低。

五、`id` 和 `class` 的使用场景

使用id的场景

需要精确选择单个元素时（如页面主标题、唯一对话框）。
需要通过JavaScript操作特定元素时。
需要创建页面锚点跳转时。

使用class的场景

需要批量应用相同样式时（如所有按钮、提示框）。
需要复用样式时（如多个模块共享相同的边框、背景）。
需要通过JavaScript批量操作元素时（如document.querySelectorAll('.box')）。

六、示例代码

<!DOCTYPE html>
<html>
<head>
    <style>
        /* id 选择器 */
        #main-title {
            color: red;
            font-size: 24px;
        }

        /* class 选择器 */
        .card {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 使用 id -->
    <h1 id="main-title">页面主标题</h1>

    <!-- 使用 class -->
    <div class="card">普通卡片</div>
    <div class="card highlight">高亮卡片</div>
</body>
</html>

七、总结与建议

id 的核心：唯一性、高优先级、精确选择。
class 的核心：复用性、批量操作、组合使用。
编码建议：

避免滥用id，仅在需要唯一标识时使用。
优先使用class，提高代码复用性和可维护性。
合理组合class（如class="btn btn-primary"），实现模块化样式。

通过正确使用id和class，可以编写出更清晰、更易维护的CSS代码。建议结合《CSS权威指南》《CSS Secrets》等书籍进一步学习。

一、id 和 class 的定义

二、id 和 class 的核心区别

三、id 和 class 的CSS用法