CSS 属性值计算过程（Computed Value）
|
zhenglin
2026年5月12日 10:50
本文热度 112
|
CSS 属性值计算过程（Computed Value）
浏览器把你写的样式、默认样式、继承样式，一步步算出最终 Computed 值，决定元素长什么样。
一、总流程：4 步走完，所有属性必有值
1. 确定声明值 → 2. 层叠（解决冲突） → 3. 继承 → 4. 使用默认值
| 步骤 | 作用 | 关键点 |
|---|
| 1. 确定声明值 | 收集所有样式声明 | 作者样式 + 浏览器默认样式，无冲突直接采用 |
| 2. 层叠 | 解决冲突，只留一个赢家 | 重要性 → 特殊性 → 源码顺序 |
| 3. 继承 | 补上前两步仍无值的属性 | 仅可继承属性（color、font-size 等），优先级低于声明 |
| 4. 使用默认值 | 兜底 | 走完前三步仍无值，用属性规范初始值 |
二、逐步骤精讲
1. 确定声明值
收集所有作用于当前元素的样式，并做基础转换：
| 操作 | 示例 |
|---|
| 颜色值转换 | red → rgb(255, 0, 0) |
| 字重转换 | bold → 700 |
| 规则修正 | float: left 强制把 display 转为 block |
2. 层叠（解决冲突 — 核心）
冲突属性按 3 层优先级 筛选赢家：
① 比较重要性
作者样式（有 !important） > 作者样式（无 !important） > 浏览器默认样式
② 比较特殊性（权重）
四位数规则：(内联, ID, 类/属性/伪类, 元素/伪元素)，从高位比到低位
| 选择器 | 权重 |
|---|
内联 style="" | 1, 0, 0, 0 |
#id | 0, 1, 0, 0 |
.class / [attr] / :hover | 0, 0, 1, 0 |
div / ::before | 0, 0, 0, 1 |
③ 比较源码顺序
权重相同，后写覆盖先写。
3. 继承
- 只作用于前两步仍无值的属性
- 只有可继承属性才会拿父元素的值：
color font-size line-height text-align 等 - 继承优先级 < 声明 / 层叠
例：<a> 标签默认有 text-decoration，已在声明值阶段确定，不会继承 body 的 none。
4. 使用默认值
走完前三步仍无值 → 使用该属性规范的初始值（initial value），保证所有属性都有值、元素能正常渲染。
三、调试万能公式
样式不对 → 打开浏览器 DevTools → Computed 面板：
- 看最终值是否符合预期
- 倒推：声明错？权重不够？没继承？被默认样式覆盖？
四、总结
CSS 属性值计算分四步：收集声明 → 层叠解决冲突（重要性 > 权重 > 顺序）→ 继承父元素可继承属性 → 默认值兜底。所有属性最终必有值。
该文章在 2026/5/12 10:50:24 编辑过
400 186 1886
