CSS2.1 6 Assigning property values, Cascading, and Inheritance

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html

小鳄鱼的 标签:

基本为翻译，加少许个人理解。

1、指定值、计算值、使用者、实际值

UA在解析和构造完整个DOM树后，必须为树中的每个元素的每个CSS属性赋一个值。

这个值会通过4个计算步骤得到：得到指定值；使用指定值得到用于继承的计算值；如果有必要要将计算值转换为一个绝对值，即使用值；最后根据设备环境的限制得到一个实际值。

1.1、如何得到指定值

a、如果通过cascade能够得到一个值，则使用这个值作为指定值。何为cascade，这也是CSS的本质样式表有3个来源：作者（程序员）、用户、用户代理（浏览器）。层叠(cascade)即指这些样式的优先级覆盖。其优先级升序排列为：用户代理定义的、用户定义的、作者定义的、作者定义的!important规则、用户定义的!important规则。

b、如果通过a未得到指定值，并且该属性是可继承的（在文档中表示了inherited的属性），那么使用父元素的继承值（上面有提到：父元素的计算值）。

c、如果a、b都没有得到指定值，那么使用初始化的值，该值在属性定义的文档中有说明。

1.2、如何得到计算值

计算值如何计算在属性定义文档中都会有说明。Computed Value那一栏。需要注意的是：对于URIs的计算，如果UA无法得到一个绝对URIs，那么会使用指定值作为计算值。

1.3、如何得到使用值

计算值是在文档没有进行布局的情况下计算得到的，有些值必须在文档布局后才能得到。例如计算值为百分比的宽度值，元素实际的宽度依赖于包含块的宽度。这样

1.4、实际值

使用值是用来渲染元素的，但是UA不一定使用该值来渲染，例如计算得到的边框宽度的使用值并非整数，而UA只能渲染整数像素的宽度，UA就会去使用值的约数来渲染，该值即为实际值。

2、层叠

层叠主要包含了：层叠顺序、!important规则、selector的特殊性、非css属性的表现属性（例如align属性）。

2.1、层叠顺序

上面已经有提到，其优先级升序排列如下：

1、UA定义的规则

2、用户定义的规则

3、作者定义的规则

4、作者!important规则

5、用户!important规则

对于同源的并且重要性相同的规则，使用selector的特殊性来确定如何覆盖。

对于同源、重要性相通并且特殊性相同的规则，那么选用最后定义的规则。注意的是：@import导入的规则视为比任何样式表中的规则先定义。

2.2、关于!important

!important需要注意的地方主要是其在IE6、IE7(Q¹)、IE8(Q)中的不规范性。

上述3个浏览器（或浏览器模式）不完全支持!important。位于相同选择器内的!important规则会失效。但是拆分开来确实有效的。更多详情可以参考(http://w3help.org/zh-cn/causes/RA8003)

2.3、计算选择器的特殊性

特殊性由4部分组成：a,b,c,d

1、直接使用style指定了的则a=1，没有a=0

2、选择器中包含#id的方式的次数为b值

3、选择器中包含的属性或者伪类的次数为c的值

4、选择器中包含的元素名或者伪元素(:first-letter,:first-line)的个数为d的值

对于同一css属性，在多个选择器或者style属性中指定了值，按上述规则计算了特殊性后。按a->d的顺序依次做对比来确定该用哪个选择器中指定的值。更详细的说明及示例(http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity)

2.4、 非CSS属性的表现属性的优先级。

非CSS属性的表现属性：例如align、color属性。

UA如果支持文档中的表现属性，那么这些属性会被转换成0特殊性的CSS规则，并且这些规则被看做是定义在最开始的作者定义的规则。这样一来，表现属性和样式表就很好的共存了。

转载于:https://www.cnblogs.com/meekcrocodile/archive/2012/05/05/2484769.html