官网地址

The final value of a property is the result of a four-step calculation: the value is determined through specification (the “specified value”), then resolved into a value that is used for inheritance (the “computed value”), then converted into an absolute value if necessary (the “used value”), and finally transformed according to the limitations of the local environment (the “actual value”).

步骤1：确认specified value

If the cascade results in a value, use it.
如果cascade导致值，则使用cascade过后的值。具体逻辑后面会介绍。
如果元素的property继承自parent，则使用parent元素的computed值。
使用property的初始值，该初始值定义在property definition里。

步骤2：确认computed value

在cascade过程中，specified value被解析成computed value.

Specified values are resolved to computed values during the cascade; for example URIs are made absolute and ‘em’ and ‘ex’ units are computed to pixel or absolute lengths.

比如em和ex单位被计算成pixel或者绝对长度。

Computing a value never requires the user agent to render the document.

计算value绝不需要user agent去执行渲染document的动作。

The computed value of URIs that the UA cannot resolve to absolute URIs is the specified value.

The computed value of a property is determined as specified by the Computed Value line in the definition of the property. See the section on inheritance for the definition of computed values when the specified value is ‘inherit’.

The computed value exists even when the property does not apply, as defined by the ‘Applies To’ line. However, some properties may define the computed value of a property for an element to depend on whether the property applies to that element.

步骤3：确认used value

Computed values are processed as far as possible without formatting the document.

computed value的处理尽可能地不去触发文档格式化的动作。

Some values, however, can only be determined when the document is being laid out.

然而对有些property的值来说，如果文档布局尚未完成，则无法决定出来。

For example, if the width of an element is set to be a certain percentage of its containing block, the width cannot be determined until the width of the containing block has been determined.

比如一个element的宽度被设置成其所在容器(containing block)宽度的百分比，则该element width属性，直到其containing block的width被决定出来之后，才能被计算出来。

used value

The used value is the result of taking the computed value and resolving any remaining dependencies into an absolute value.

computed value作为输入，再加上其他剩余的依赖因素一齐考虑，计算出的结果为used value.

actual value

A used value is in principle the value used for rendering, but a user agent may not be able to make use of the value in a given environment.

原则上来说，used value被用来渲染，但是在某些环境下，user agent可能无法直接使用该used value来进行渲染。

For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the computed width;

比如某种user agent只能根据整型的pixel宽度来渲染border，而computed width带有小数，此时只能将其做近似处理。

or the user agent may be forced to use only black and white shades instead of full color.

或者某种user agent只能渲染黑或者白，而color property计算出来是彩色的。

The actual value is the used value after any approximations have been applied.

因此，actual value是used value施加了approximation之后的结果值。

属性值的继承

<H1>The headline <EM>is</EM> important!</H1>

em节点内的值继承自其父节点h1：

当继承发生时，元素从其父元素继承computed value, 将computed value作为其specified value和computed value.

When inheritance occurs, elements inherit computed values. The computed value from the parent element becomes both the specified value and the computed value on the child.

例子：

<html>
<style>body { font-size: 10pt }
h1 { font-size: 130% }div { font-size: 13pt }
</style><BODY><H1>A <EM>large</EM> heading</H1><div>large</div>
</BODY>
</html>

最终，em元素继承了h1的计算后的font-size：13pt，而不是user agent自带的 2em：

如果手动启用user agent的font-size: 2em, 效果如下：

css cascade 过程

Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
User agent: Conforming user agents must apply a default style sheet (or behave as if they did).

A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language.

User Agent默认的style sheet应当为特定document language而设计的元素，进行满足通常需求的呈现。

比如在浏览器的user agent里, HTML里的EM元素应该使用italic 字体呈现。

Note that the user may modify system settings (e.g., system colors) that affect the default style sheet. However, some user agent implementations make it impossible to change the values in the default style sheet.

用户也可能会通过修改系统设置的方式，去影响默认的style sheet.

权重问题 - weight

By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for “!important” rules. All user and author rules have more weight than rules in the UA’s default style sheet.

selector的优先级

Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones.

selector的优先级按照specificity从高到低排序。

if two declarations have the same weight, origin and specificity, the latter specified wins.

同样优先级的selector，后定义的会覆盖先定义的。

selector specificity计算

使用公式：

A selector’s specificity is calculated as follows:

count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.

虽然[id=p33], 从语义上说是id selector，但形式上仍然是attribute selector.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

将abcd连接起来，就形成了最后的specifity数字。

一些例子：

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

在下面这个例子里：

<HEAD>
<STYLE type="text/css">#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

运行时p为绿色，因为inline style attribute优先级比style node里定义的red color高。

更多Jerry的原创文章，尽在：“汪子熙”:

css 元素 property value计算过程的学习笔记相关推荐

《计算广告》学习笔记（二）
<计算广告>学习笔记(二) 第三章:在线广告产品概述 3.1商业产品的设计原则 3.2广告系统的产品接口第四章:合约广告 4.1广告位合约 4.2受众定向 4.2.1受众定向方法概览 4 ...
《计算广告》学习笔记（四）
<计算广告>学习笔记(四) 第七章:数据加工与交易 7.1有价值的数据来源 7.2数据管理平台 7.2.1三方数据划分 7.2.2第一方数据管理平台 7.2.3第三方数据平台 7.3数据交 ...
《计算广告》学习笔记（一）
<计算广告>学习笔记(一) 0.写在前面 1.第一章:在线广告综述 1.1:免费模式与互联网核心资产 1.2:大数据与广告的关系 1.3:广告的定义与目的 1.4:在线广告的表现形式 1. ...
计算鬼成像学习笔记二：二阶关联函数探究
计算鬼成像学习笔记二:二阶关联函数探究 1 一阶关联函数 2 二阶关联函数 3 二阶关联如何重构物体 4 差分鬼成像关联公式 5 归一化鬼成像关联公式 1 一阶关联函数一阶关联函数是光场的电场强度之 ...
webpack：js、css、es6装载与压缩配置-学习笔记
文章目录 webpack:js.css.es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loader与plugin区别 less css抽取 js,css压缩处理依赖包降级处理 ...
Satwe楼板能用弹性模计算吗_PKPM学习笔记，或许半辈子都能用上
原标题:PKPM学习笔记,或许半辈子都能用上 01裂缝与挠度裂缝,模型里计算裂缝是按矩形截面计算弯矩,而不考虑翼缘影响,实际上翼缘影响是很大的,也就是说模型计算出的结果裂缝偏大,一般梁支座裂缝不考虑 ...
片偏移怎么计算_计算机网络学习笔记（四）之网络层
点击蓝字关注我吧越努力越幸运!!! 1 网络层的功能 1.1异构网络互联网络的互联:指将两个以上的计算机网络,通过一定的方法, 用一种或多种通信处理设备(即中间设备)相互联接起来,以构成更大的网络 ...
量子计算入门基础学习笔记（二量子算符与张量）
艰难困苦玉汝于成一 . 矩阵与量子算符 (1)外积 (2) 投影算符 (3)逆算符 (4)厄米算符 Hermitian operators (5)幺正算符 Unitary 二 . 张量与量子比特 ...
和php交互的过程_JavaScript学习笔记（二十三）服务器PHP
PHP PHP 一门后端语言为什么要学习一个后端语言呢? 目前市场上的需求,要求前端人员掌握一个后端语言方便和后端开发人员进行交互基本组织架构在讲后端语言之前,我们简单的了解一下我们基本的组织 ...

css 元素 property value计算过程的学习笔记