CSS的样式表 内联外部和内部优先级？ 第1页

这么说吧，正确理解 CSS 中层叠优先级逻辑的工程师，很少。但逻辑其实并不复杂。

所谓的「层叠」（cascading），就是为每个元素的每个 CSS 属性计算出生效的属性值的过程。

1. 先看样式来源，也就是说样式是谁写的。同时结合!important。

浏览器 +!important> 用户 +!important> 开发者 +!important> 开发者 > 用户 > 浏览器。

2. 再看规则的特异性（specificity）。

内联 > 选择器。

3. 最后看声明顺序。

什么内部外部根本不影响，网上错漏百出的文章太多了。

另外，很多人容易把层叠过程和继承搞混。要搞清楚这个，先要了解 CSS 处理属性值的流程，属性值在处理流程中分为多个阶段：

1. declared value

比如一个<div>元素的width属性，可能被很多地方的声明命中：

       <div id="box" style="width: 100px">      

       div {   width: 10em; }  #box {   width: 80%; }      

2. cascaded value

通过计算层叠优先级，在第一步的多个值中找到优先级最高的那个。

3. specified value

如果在前两步发现没有指定color的值，那么根据默认值的逻辑进行填充。具体逻辑可以参考一下我之前的一个回答。

4. computed value

把80%这种相对值计算为绝对值，比如根据父元素的宽度转换成px单位。

5. used value

多个属性值结合以后，不一定满足规范的约束，需要根据规范规定的方式确定各个属性最后采用的值。比如一个绝对定位元素的left/right/width不可能完全根据指定值来，那么在指定的值过度约束时，需要根据规则进行调整。

6. actual value

浏览器实现时根据硬件、软件环境可能会对最后生效的值进一步进行调整，比如调整小数的精度。

我们常说的优先级其实就是其中 1 到 2 的最初那步，一共就三个层级的规则。