css 元素 property value计算过程的学习笔记
官網地址
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
如果cascade導致值，則使用cascade過后的值。具體邏輯后面會介紹。
步驟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计算过程的学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 五一假期余额不足！返杭列车上一车厢孩子都
- 下一篇： Uber 一季度营收同比增长 29%，净