CSS属性计算过程详解

CSS属性计算过程是浏览器确定元素各属性最终值的关键步骤，涉及多个阶段的处理。以下是详细过程：

1. 收集声明值（Declared Values）

浏览器首先收集所有直接指定给元素的CSS声明（包括各种来源）：

• 作者样式表（开发者编写的样式）
• 用户样式表（用户自定义样式，如浏览器插件）
• 用户代理样式表（浏览器默认样式，如 <div>的display: block）
• 内联样式（元素的style属性）

示例：

若元素同时被多个规则匹配：

div { color: red; }        /* 规则A */
.my-class { color: blue; } /* 规则B */

此时收集到color的两个声明值：red和blue。

2. 解决层叠冲突（Cascading）

当多个声明值冲突时，按以下优先级排序（由高到低）：

• 重要性（!important）
  • 标记了!important的声明优先级最高。
• 来源（Origin）
  • 优先级顺序：内联样式 > 作者样式 > 用户样式 > 浏览器默认样式。
• 选择器特异性（Specificity）
  • 计算选择器权重：内联样式 > ID > 类/伪类/属性 > 元素/伪元素。
• 代码顺序（Order）
  • 后出现的样式覆盖前面的。

示例：

• 若规则A和规则B同时作用于同一元素：
  规则B的选择器（类选择器）比特异性更高，最终应用color: blue。

3. 处理继承（Inheritance）

对未设置声明值的属性，检查是否可继承自父元素：

• 可继承属性：如color, font-family, line-height等。
• 不可继承属性：如border, margin, background等。

示例：

若父元素设置color: green，子元素未指定color时，子元素会继承green。

4. 应用默认值（Defaulting）

• 若属性既未声明也不可继承，则使用初始值（每个CSS属性定义的默认值）：
  例如：display的初始值为inline，width的初始值为auto。

最终计算值（Computed Value）

经过上述步骤后，浏览器得到计算值（Computed Value）：

• 将相对单位转换为绝对值（如em→px、%→父元素参考值等）。
• 但尚未进行实际布局（如width: 50%此时仍保留百分比，布局阶段才会计算具体像素）。

示例完整流程

假设有以下HTML和CSS：

<div class="box" style="font-size: 16px;">Hello</div>

.box { 
  color: red;          /* 作者样式 */
  font-size: 14px !important; 
}
div { 
  color: blue;         /* 作者样式 */
  font-size: 18px; 
}

• 收集声明值：
  • color: red（类选择器）、blue（元素选择器）
  • font-size: 14px（含!important）、18px、内联16px
• 解决层叠：
  • color: 类选择器.box > 元素选择器div → red
  • font-size: !important优先级最高 → 14px
• 继承与默认值：
  • 无未处理属性，最终计算值：color: red; font-size: 14px;

关键概念总结

• 层叠（Cascade）：解决多来源样式的冲突。
• 继承（Inheritance）：自动传递某些属性值到子元素。
• 初始值（Initial Value）：每个属性的默认值，作为最终兜底。

理解这一过程有助于高效调试CSS问题（如样式覆盖、继承失效等）。