CSS 属性值计算

属性值的计算可谓是 CSS 101 。然而入门资料从来都是良莠不齐的，当初从畅销书上得来的一些误解，如今整理笔记的时候才发现。这里就结合规范梳理一遍。

一个属性的值在计算时会经过 4 个阶段

1. Specified values
2. Computed values
3. Used values
4. Actual values

Specified values

这里有 3 种可能，满足一种就可以

• 计算 cascade 有结果
• 否则，若这个值可以继承，继承父元素的 computed value（根元素除外）
• 还是没有，则用默认值

计算 cascade

这里就是重点，经历 4 个步骤：

1. 匹配 Media Type 的筛选

2. 按来源排序（低到高）

   
   
   1. user agent declarations
   2. user normal declarations
   3. author normal declarations
   4. author important declarations
   5. user important declarations

3. 同个来源的按权值（specificity）排序，收集选择器里的属性个数比较

   
   
   • "style" 属性（attribute）里的属性 * 1000
   • ID 属性 * 100
   • 其它属性、类、伪类 * 10
   • 元素名、伪元素 * 1

4. 如果前面得出并列结果，则按位置排序

   
   
   • 越靠后越高
   • import 进来的样式看做在本样式表前面

可以看到来源总共有三个，user agent、user 和 author。User important 最高是因为用户的自定义样式一般是为了覆盖 user agent 作为默认样式，但有时候用户也想覆盖 author 即网站本身的样式，于是让 user important 最高。

注意