CSS层叠规则
CSS层叠规则[编辑 | 编辑源代码]
CSS层叠规则（Cascading Rules）是CSS（层叠样式表）的核心机制之一，它决定了当多个CSS规则应用于同一个HTML元素时，浏览器如何选择最终的样式。理解层叠规则对于编写可维护、可预测的CSS代码至关重要。
概述[编辑 | 编辑源代码]
CSS的“层叠”指的是多个样式来源（如作者样式、用户样式、浏览器默认样式）按照特定优先级顺序合并的过程。层叠规则主要由以下三个因素决定：
1. 来源重要性（Importance）：如`!important`声明、用户代理样式等。 2. 选择器特异性（Specificity）：选择器的权重计算。 3. 源代码顺序（Order）：后出现的规则覆盖前面的规则。
层叠规则详解[编辑 | 编辑源代码]
1. 来源与重要性[编辑 | 编辑源代码]
样式表的来源按优先级从高到低排序如下：
- 用户代理（浏览器）的`!important`声明
- 用户的`!important`声明
- 作者的`!important`声明
- 作者普通声明
- 用户普通声明
- 用户代理（浏览器）默认样式
2. 选择器特异性[编辑 | 编辑源代码]
当多个规则来自同一来源时，浏览器会计算选择器的特异性（Specificity）。特异性是一个四元组`(a, b, c, d)`：
- `a`：行内样式（如`style="..."`）的数量
- `b`：ID选择器的数量
- `c`：类、伪类、属性选择器的数量
- `d`：元素、伪元素选择器的数量
比较时从左到右逐级对比，数值大的优先级更高。
示例：
/* 特异性：(0,0,1,1) */
div.warning { color: orange; }
/* 特异性：(0,1,0,0) */
#main-title { color: blue; }
/* 特异性：(1,0,0,0) */
<h1 style="color: red;">标题</h1>
3. 源代码顺序[编辑 | 编辑源代码]
如果来源和特异性都相同，则后定义的规则会覆盖前面的规则。
示例：
/* 最终颜色为green */
p { color: red; }
p { color: green; }
层叠过程可视化[编辑 | 编辑源代码]
实际案例[编辑 | 编辑源代码]
假设有以下HTML和CSS：
HTML代码：
<div id="content" class="highlight">
<p class="intro">示例文本</p>
</div>
CSS代码：
/* 规则1：特异性 (0,0,1,1) */
div.highlight p { color: blue; }
/* 规则2：特异性 (0,0,2,0) */
.highlight .intro { color: green; }
/* 规则3：特异性 (0,1,0,1) */
#content p { color: red; }
结果分析： 1. 规则1特异性：`(0,0,1,1)` 2. 规则2特异性：`(0,0,2,0)` 3. 规则3特异性：`(0,1,0,1)`
比较规则2和规则3：
- 规则2的第三位是2
- 规则3的第二位是1
由于特异性比较从左到右，规则3的第二位更高，因此最终文本颜色为红色。
!important 的特殊情况[编辑 | 编辑源代码]
`!important`会打破正常的层叠规则，应谨慎使用。它的优先级高于普通声明，但不同来源的`!important`仍需按来源重要性排序。
示例：
p { color: blue !important; }
p { color: red; } /* 无效，因为前一条有!important */
数学表示[编辑 | 编辑源代码]
层叠优先级可以形式化为： 其中比较规则为：
最佳实践[编辑 | 编辑源代码]
- 尽量避免使用`!important`
- 使用合理的选择器特异性
- 保持一致的代码顺序
- 使用CSS预处理器时注意生成的CSS顺序
总结[编辑 | 编辑源代码]
CSS层叠规则是CSS的核心机制，理解它可以帮助开发者：
- 预测样式应用结果
- 编写更可维护的代码
- 高效解决样式冲突
通过掌握来源重要性、选择器特异性和源代码顺序这三个关键因素，可以完全掌控CSS的层叠行为。