1. 引言
CSS 定义了一组有限的参数,称为 属性,用于指导文档的渲染。每个 属性 都有一个名称(例如,color、font-size 或 border-style),一个值空间(例如,<color>、<length-percentage>,[ solid | dashed | dotted | … ]),以及对文档渲染的定义行为。属性值通过 属性声明 分配给文档的各个部分,给属性赋值(例如 red、12pt、dotted)以供关联元素或框使用。
CSS 的基本设计原则之一是 级联,它允许多个样式表影响文档的表现。当不同的声明试图为同一元素/属性组合设置值时,必须以某种方式解决冲突。
当没有声明试图为元素/属性组合设置值时,问题则相反。在这种情况下,可以通过 继承 或查看属性的 初始值 来找到一个值。
级联 和 默认 过程将一组声明作为输入,并为每个元素上的每个属性输出一个 指定值。
找到文档中所有元素上所有属性的指定值的规则在本规范中有描述。页面上下文及其边距框中指定值的查找规则在 [css-page-3] 中描述。
1.1. 模块交互
本节为规范性。
本模块替代并扩展了在 [CSS2] 第 6 章中定义的属性值分配、级联和继承规则。
其他 CSS 模块可能会扩展此处定义的一些语法和特性的定义。例如,媒体查询第 4 级规范与本模块结合使用时,扩展了在本规范中使用的 <media-query> 值类型的定义。
为了本规范的目的,文本节点 被视为其关联元素的 元素 子节点,并拥有完整的属性集;由于它们不能被选择器定位,因此它们的所有计算值均由 默认 赋值。
2. 导入样式表:@import 规则
@import 规则允许用户从其他样式表中导入样式规则。 如果 @import 规则引用一个有效的样式表, 用户代理必须将样式表的内容视为直接写在 @import 规则的位置, 但有两个例外:
-
如果某个特性 (例如 @namespace 规则) 明确 定义只适用于特定样式表, 而不适用于任何导入的样式表, 则它不适用于导入的样式表。
-
如果某个特性依赖于样式表中两个或多个构造的相对顺序 (例如 @namespace 规则必须没有其他 规则在它之前), 它只适用于同一样式表中的构造。
例如, 从导入样式表中的样式规则的声明与级联的交互 就好像它们字面上写在样式表中,位于@import 的位置。
任何 @import 规则必须在样式表中 所有其他有效的 at-rules 和样式规则之前 (忽略 @charset),否则 @import 规则无效。 @import 的语法是:
@import [ <url> | <string> ] [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>? ;
其中 <url> 或 <string> 给出要导入的样式表的 URL, 可选的 [<supports-condition>|<declaration>] 和 <media-query-list> (统称为 导入条件) 说明它适用的条件。
@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
如果提供了 <string>, 它必须被解释为具有相同值的 <url>。
@import "mystyle.css" ; @import url ( "mystyle.css" );
2.1. 条件 @import 规则
导入条件 允许导入依赖于媒体或特性支持。 如果没有任何 导入条件,则导入是 无条件的。 (为 所有 指定 <媒体查询列表> 具有相同的效果。) 如果 导入条件 不匹配, 导入样式表中的规则不适用, 就好像导入样式表被包裹在 @media 和/或 @supports 块中,且具有给定条件。
@import url ( "fineprint.css" ) print; @import url ( "bluish.css" ) projection, tv; @import url ( "narrow.css" ) handheld and( max-width:400 px );
用户代理因此可以避免获取条件导入 只要 导入条件 不匹配。 此外,如果 <supports-condition> 阻止导入样式表的应用, UA 必须不 获取样式表(除非通过其他链接加载) 并且 必须 返回 null 作为导入规则的 CSSImportRule.styleSheet 值 (即使通过其他链接加载)。
@import url ( "fallback-layout.css" ) supports ( not( display: flex)); @supports ( display: flex) { ...}
导入条件 由 <媒体查询列表> 给出,它被解析和解释为 媒体查询列表, 而 <supports-condition> 被解析和解释为 [[支持查询]]。 如果在 <supports-condition> 的位置给出了 <declaration>, 则它必须被解释为 <supports-decl>(即,额外的一对括号是隐含的) 并视为 <supports-condition>。
@import "mystyle.css" supports ( display: flex); @import "mystyle.css" supports (( display: flex));
导入条件 的评估和完整语法由 媒体查询 [MEDIAQ] 和 CSS 条件 规则 [CSS-CONDITIONAL-3] 规范定义。
2.2. 处理样式表导入
当同一样式表在多个地方被导入或链接到文档时,用户代理必须处理(或表现得好像他们在处理)每个链接,就好像该链接指向一个独立的样式表。
注意:这并不对资源获取提出任何要求,仅对样式表在 CSSOM 中的反映及在诸如此类的规范中的使用提出要求。在假设适当缓存的情况下,即使链接或导入多次,用户代理仅获取样式表一次也是完全合适的。
导入样式表的 级联源 是导入它的样式表的 级联源。
导入样式表的 环境编码 是导入它的样式表的编码。 [css-syntax-3]
-
如果 rule 有一个 <supports-condition>, 而该条件不为真, 则返回。
-
让 parsedUrl 为 URL 解析器 步骤的结果,使用 rule 的 URL 和 parentStylesheet 的 位置。 如果算法返回错误, 则返回。 [CSSOM]
-
从 parsedUrl 获取样式资源, 使用样式表 parentStylesheet, 目标为“样式”, CORS 模式为“no-cors”, 处理响应的步骤如下,给定 响应 response 和 字节流,null 或失败 byteStream:
-
如果 maybeByteStream 不是字节流,返回。
-
如果 parentStylesheet 在 怪异模式 中,且 response 是 CORS-同源, 让 content type 为
"text/css"
。 否则,让 content type 为 response 的内容类型元数据。 -
如果 content type 不是
"text/css"
, 返回。 -
让 importedStylesheet 为 解析 byteStram 的结果,给定 parsedUrl。
-
将 importedStylesheet 的 源清洁标志 设置为 parentStylesheet 的 源清洁标志。
-
将 rule 的
styleSheet
设置为 importedStylesheet。
-
2.3. CSS 样式表的 Content-Type
导入样式表的处理依赖于链接资源的实际类型:
如果链接资源的类型为 text/css
,
则必须将其解释为 CSS 样式表。
否则,必须将其解释为网络错误。
3. 简写属性
一些属性是 简写属性, 这意味着它们允许作者通过单一属性指定多个属性的值。 简写属性 设置所有的 长属性, 就像在原地展开一样。
当在 简写 形式中省略值时, 除非另有定义, 否则每个“缺失”的 长属性 被赋予 其 初始值。
例如,写 background: green 而不是 background-color: green 可以确保背景颜色 覆盖任何可能已将背景设置为带有 背景图像 的早期声明。
h1{ font-weight : bold; font-size : 12 pt ; line-height : 14 pt ; font-family : Helvetica; font-variant : normal; font-style : normal; }
因此可以重写为
h1{ font : bold12 pt /14 pt Helvetica}
在某些情况下,简写 可能具有不同的语法或特殊关键字,这些关键字与其 子属性 的值不直接对应。 (在这种情况下,简写 将明确定义其值的扩展。)
在其他情况下,某个属性可能是 仅重置子属性 的简写:像其他 子属性,它在未指定时被简写重置为其初始值,但简写可能不包括将 子属性 设置为其其他值的语法。例如,border 简写将 border-image 重置为其初始值 none,但没有语法将其设置为其他值。[css-backgrounds-3]
如果 简写 被指定为其中一个 CSS 全局关键字 [css-values-3],它将所有的 子属性 设置为该关键字,包括任何 仅重置子属性。 (请注意,这些关键字不能与单个声明中的其他值组合,即使在简写中也不行。)
声明一个 简写 属性为 !important 相当于将所有的 子属性 声明为 !important。
3.1. 属性别名
属性有时在被支持一段时间后会更改名称,例如供应商前缀属性被标准化。原始名称仍需出于兼容性原因得到支持,但新名称是首选。为此,CSS 定义了两种不同的方式来“别名”旧语法到新语法。
- 遗留名称别名
-
当旧属性的值语法与新属性相同时,这两个名称通过类似于大小写映射的操作进行别名处理:在解析时,旧属性被转换为新属性。此转换在 CSSOM
中也适用,无论是字符串参数还是属性访问器:对旧属性名称的请求会透明地转移到新属性名称上。
例如,如果 old-name 是 遗留名称别名,指向 new-name,
getComputedStyle
将返回( el). oldNamenewName
属性的计算样式,而el
将把 new-name 属性设置为. style. setPropertyValue( "old-name" , "value" )
。"value" - 遗留简写
-
当旧属性的语法与新属性不同时,两个名称通过 简写 机制进行别名。这些简写被定义为 遗留简写,其使用是 不推荐
的。它们的行为与常规简写完全相同,除了在序列化声明时 CSSOM 不会使用它们。[CSSOM]
例如,page-break-* 属性是 遗留简写,指向 break-* 属性(见 CSS Fragmentation 3 § 3.4 页面中断别名:page-break-before、page-break-after 和 page-break-inside 属性)。
设置 page-break-before: always 在解析时扩展为 break-before: page,像其他简写一样。类似地,如果设置了 break-before: page,调用
getComputedStyle
将返回( el). pageBreakBefore
。但是,在序列化样式块时(见 CSSOM 1 § 6.7.2 序列化 CSS 值),page-break-before 属性绝不会被选为序列化的简写,无论是它还是 break-before 被指定;相反,break-before 将始终被选中。"always"
3.2. 重置所有属性:all 属性
名称: | all |
---|---|
值: | initial | inherit | unset | revert |
初始: | 见各个属性 |
适用对象: | 见各个属性 |
继承: | 见各个属性 |
百分比: | 见各个属性 |
计算值: | 见各个属性 |
动画类型: | 见各个属性 |
规范顺序: | 根据语法 |
all 属性是一个 简写,可以重置 所有 CSS 属性,除了 direction 和 unicode-bidi。它仅接受 CSS-wide 关键字。它不会重置 自定义属性 [css-variables-1]。
注意: 被排除的 CSS 属性 direction 和 unicode-bidi 实际上是标记级特性,不应在作者样式表中设置。(它们作为 CSS
属性的存在仅是为了样式化用户代理不支持的文档语言。)作者应使用适当的标记,例如 HTML 的 dir
属性。
这对于包含在页面中的“组件”的根元素很有用,该元素不希望继承外部页面的样式。然而,请注意,应用于该元素的任何“默认”样式(例如,例如来自于块元素的用户代理样式表上的 display: block)也将被清除。
4. 值处理
一旦用户代理解析了文档并构建了文档树,必须为 扁平树 中的每个元素,以及格式化结构中的每个盒子,分配一个适用于目标媒体类型的每个属性的值。
给定元素或盒子的 CSS 属性的最终值是多步骤计算的结果:
- 首先,收集应用于元素的所有 声明值,对于每个元素上的每个属性。该元素可能有零个或多个 声明值。
- 层叠产生 层叠值。每个属性每个元素最多有一个 层叠值。
- 默认产生 指定值。每个元素对于每个属性都有一个 指定值。
- 解析值依赖关系产生 计算值。每个元素对于每个属性都有一个 计算值。
- 格式化文档产生 使用值。元素仅在该属性适用于元素时才有 使用值。
- 最后,使用值根据显示环境的限制转化为 实际值。与 使用值 一样,对于给定属性在元素上可能存在或不存在 实际值。
未 连接 或不属于文档的
扁平化元素树 的元素不参与 CSS 值处理,也没有 声明、层叠、指定、计算、使用 或 实际 值,即使它们可能被分配了样式声明(例如,通过 style
属性)。
4.1. 声明值
每个属性声明 应用于一个元素 为该属性贡献一个与元素关联的 声明值。有关详细信息,请参见 过滤声明。
这些值随后通过 层叠 进行处理,以选择一个单一的“胜利值”。
4.1.1. 值别名
某些属性值具有 遗留值别名:在解析时,遗留语法被转换为新语法,导致 声明值 与解析输入不同。这些别名通常用于处理遗留兼容性要求,例如将 厂商前缀 的值转换为其标准等价物。
4.2. 层叠值
层叠值 代表 层叠 的结果:它是赢得层叠的 声明值(在 层叠的输出 中首先排序)。如果 层叠的输出 是空列表,则没有 层叠值。
4.3. 指定值
指定值 是样式表作者为该元素意图设定的给定属性的值。它是将 层叠值 通过 默认化 过程的结果,保证每个元素的每个属性都有 指定值。
在许多情况下,指定值 是 层叠值。然而,如果根本没有 层叠值,则 指定值 将被 默认化。CSS-wide 关键字 在它们是属性的 层叠值 时会特别处理,设置 指定值,如该关键字要求的,见 § 7.3 显式默认化。
4.4. 计算值
计算值 是 解析 指定值 的结果,正如在属性定义表的“计算值”行中定义的那样, 通常在为 继承 做准备时对其进行绝对化处理。
注意: 计算值 是在 继承 期间从父级传递给子级的值。
出于历史原因,
它不一定是由 getComputedStyle()
函数返回的值,
有时返回的是 使用值。
[CSSOM] 此外,计算值
是一种抽象数据表示:
它们的定义反映了这种数据表示,而不是数据如何序列化。
例如,序列化规则通常允许省略某些在解析期间隐含的值;
但这些值仍然是 计算值 的一部分。
- 带有相对单位的值 (em, ex, vh, vw) 必须通过与适当的参考大小相乘来变为绝对值
- 某些关键字 (例如,更小, 更粗) 必须根据其定义进行替换
- 某些属性上的百分比必须乘以一个参考值 (由属性定义)
- 有效的相对 URL 必须解析为绝对值。
请参见下表中的示例 (f)、(g) 和 (h)。
注意: 一般而言, 计算值 尽可能解决 指定值,而无需布局文档 或执行其他昂贵或难以并行化的操作, 例如解析网络请求 或从元素及其父元素获取值以外的值。
即使属性不适用, 计算值 仍然存在。 然而,某些属性可能会根据属性是否 应用于 元素而改变其确定 计算值 的方式。
4.5. 使用值
使用值 是 通过取 计算值 并完成任何剩余的计算以使其成为 在文档格式中使用的绝对理论值。
例如,声明 width: auto 无法在不知道元素祖先的布局的情况下解析为长度, 因此 计算值 为 自动, 而 使用值 是一个绝对 长度,例如 100px。 [CSS2]
另一个例子,一个
<div>
可能具有计算的 break-before 值为 自动,
但通过从其第一个子元素传播获得一个使用的 break-before 值为 页面。 [css-break-3]
如果某个属性不 适用于 此元素或框类型, 则它对于该属性没有 使用值。
例如, flex 属性在不是 flex 项 的元素上没有 使用值。
4.5.1. 适用属性
如果某个属性不 适用于 某个元素或框类型——如其“适用范围”行中所述——这意味着它不会直接对该类型的框或元素生效。
注意: 不适用的属性仍然可以有 间接 格式化效果 如果其计算值影响适用其他属性的计算; 当然,其 计算值, 总是存在, 仍然可以继承给后代并对其生效。
p
元素(其默认值为 display:
block)将产生效果,
尽管 text-transform 仅适用于
行内框,
因为该属性会继承
到段落的匿名 根行内框 并应用于其包含的文本。
注意: 定义为适用于“所有元素”的属性 适用于所有元素和 显示类型, 但不一定适用于所有 伪元素 类型, 因为伪元素通常具有自己的特定渲染模型或其他限制。 然而,::before 和 ::after 伪元素被定义为生成几乎与正常元素相同的框,因此定义上接受所有适用于“所有元素”的属性。 有关 伪元素 的更多信息,请参见 [CSS-PSEUDO-4]。
4.6. 实际值
A used value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. 例如,一个用户代理可能只能渲染具有整数像素宽度的边框,因此可能需要近似已使用的宽度。 此外,元素的字体大小可能需要根据字体的可用性或font-size-adjust属性的值进行调整。 实际值是 在进行任何此类调整后所使用的值。
注意:通过探测元素的实际值,可以了解文档的布局。 但是,并非所有信息都记录在实际值中。 例如,page-break-after属性的实际值 不反映元素后是否有分页。 同样,孤立行的实际值 不反映某个元素中有多少孤立行。 请参见下表中的示例(j)和(k)。
4.7. 示例
属性 | 胜利声明 | 级联值 | 指定值 | 计算值 | 使用值 | 实际值 | |
---|---|---|---|---|---|---|---|
(a) | text-align | text-align: left
| left | left | left | left | left |
(b) | border-top-width, border-right-width, border-bottom-width, border-left-width | border-width: inherit
| inherit | 4.2px | 4.2px | 4.2px | 4px |
(c) | width | (none) | (none) | auto (初始值) | auto | 120px | 120px |
(d) | list-style-position | list-style-position: inherit
| inherit | inside | inside | inside | inside |
(e) | list-style-position | list-style-position: initial
| initial | outside (初始值) | outside | outside | outside |
(f) | font-size | font-size: 1.2em
| 1.2em | 1.2em | 14.1px | 14.1px | 14px |
(g) | width | width: 80%
| 80% | 80% | 80% | 354.2px | 354px |
(h) | width | width: auto
| auto | auto | auto | 134px | 134px |
(i) | height | height: auto
| auto | auto | auto | 176px | 176px |
(j) | page-break-after | (none) | (none) | auto (初始值) | auto | auto | auto |
(k) | orphans | orphans: 3
| 3 | 3 | 3 | 3 | 3 |
5. 过滤
为了找到声明值, 实现必须首先识别适用于每个元素的所有声明。 如果声明适用于元素,则该声明适用:
- 它属于当前适用于此文档的样式表。
- 它不被具有假条件的条件规则[CSS-CONDITIONAL-3]所限定。
- 它属于选择器与元素匹配的样式规则。[SELECT](必要时考虑作用域)。
- 它在语法上是有效的: 声明的属性是已知属性名称, 并且声明的值与该属性的语法相匹配。
适用的声明的值形成每个元素每个属性的声明值列表。 下一部分, 级联, 优先考虑这些列表。
6. 级联
级联采取一个无序 的声明值列表, 对于给定属性的给定元素, 根据声明的优先级进行排序,并输出单个级联值。
6.1. 级联排序顺序
级联根据以下标准对声明进行排序, 按优先级降序排列:
- 来源与重要性
-
声明的来源基于其来源
及其重要性
是否用!important声明(见下文)。
各种来源的优先级为,按降序排列:
- 过渡声明[css-transitions-1]
- 重要 用户代理 声明
- 重要 用户 声明
- 重要 作者声明
- 动画声明[css-animations-1]
- 普通 作者声明
- 普通 用户声明
- 普通 用户代理声明
来自来源的声明在 此列表中越早,优先级越高。
- 上下文
-
文档语言可以提供来自不同封装上下文的混合声明,
例如嵌套的树上下文和影子树中的
[DOM]。
当比较来自不同封装上下文的两个声明时, 对于普通规则 外部上下文的声明优先, 而对于重要规则 内部上下文的声明优先。 在此目的上,[DOM] 树 上下文被视为嵌套在 包含影子的树顺序中。
注意:这有效意味着属于普通声明的封装上下文可以设置容易被外部上下文覆盖的默认值, 而属于重要声明的 封装上下文可以强制要求,不能被外部上下文覆盖。
- 特异性
- 选择器模块 [SELECT] 描述了如何计算选择器的特异性。 每个声明与其所在样式规则具有相同的特异性。 在这一步中, 不属于样式规则的声明 (例如样式属性的内容) 被视为具有高于任何选择器的特异性。 具有最高特异性的声明优先。
- 出现顺序
-
文档顺序中的最后一个声明胜出。
在此目的下:
- 来自导入样式表的声明按其样式表被替换的位置排序 @import规则。
- 由源文档独立链接的样式表的声明被视为在链接顺序中串联, 由主机文档语言确定。
- 样式属性的声明 根据样式属性出现的元素的文档顺序进行排序,并且全部放在样式表之后。
级联的输出是每个元素每个属性的声明值的(可能为空)排序列表。
6.2. 层叠来源
每个样式规则都有一个 层叠来源, 这决定了它在层叠中的进入位置。 CSS 定义了三个核心 来源:
- 作者来源
- 作者根据文档语言的约定为源文档指定样式表。 例如,在 HTML 中, 样式表可以包含在文档中或外部链接。
- 用户来源
- 用户可能能够为特定文档指定样式信息。 例如,用户可以指定包含样式表的文件 或用户代理可以提供生成用户样式表的接口 (或表现得像是这样)。
- 用户代理来源
- 符合规范的用户代理必须应用默认样式表 (或表现得像是这样)。 用户代理的默认样式表应以符合文档语言的一般呈现期望的方式 呈现文档语言的元素 (例如,对于视觉浏览器,HTML 中的 EM 元素以斜体显示)。 参见例如 HTML 用户代理样式表。 [HTML]
CSS 的扩展定义了以下附加 来源:
- 动画来源
- CSS 动画 [css-animations-1] 在运行时生成表示其效果的“虚拟”规则。
- 过渡来源
- 与 CSS 动画类似,CSS 过渡 [css-transitions-1] 在运行时生成表示其效果的“虚拟”规则。
6.3. 重要声明:!important 注解
CSS 努力在作者样式表和用户样式表之间创建一种权力平衡。 默认情况下,作者样式表中的规则会覆盖用户样式表中的规则, 而用户样式表中的规则又会覆盖用户代理的默认样式表中的规则。 为了平衡这一点,可以将声明标记为 重要, 这会增加其在层叠中的权重并反转优先级顺序。
如果声明具有 !important 注解,如 [css-syntax-3] 定义的那样, 即如果其值中的最后两个(非空格、非注释)标记是分隔符标记 ! 后跟标识符标记 important,则该声明为 重要。 所有其他声明为 正常(非重要)。
一个重要声明优先于正常声明。 作者和用户样式表可以包含重要声明, 用户来源 重要声明会覆盖作者来源 重要 声明。 这一 CSS 特性提高了文档的可访问性 使具有特殊需求的用户 (大字体、颜色组合等) 能够控制呈现。
重要 声明来自所有来源,优先于动画。 这允许作者在重要情况下覆盖动画值。 (动画值通常会覆盖所有其他规则。) [css-animations-1]
用户代理样式表 也可以包含重要 声明。 这些会覆盖所有作者和用户声明。
/* 来自用户样式表 */ p{ text-indent : 1 em !important} p{ font-style : italic !important} p{ font-size : 18 pt } /* 来自作者样式表 */ p{ text-indent : 1.5 em !important} p{ font : normal12 pt sans-serif !important} p{ font-size : 24 pt }
属性 | 胜出的值 |
---|---|
text-indent | 1em |
font-style | italic |
font-size | 12pt |
font-family | sans-serif |
6.4. 非 CSS 呈现提示的优先级
用户代理可能选择尊重源文档标记中的呈现提示,例如 bgcolor
属性或
s
元素在 [HTML] 中。
所有基于文档语言的样式必须转换为相应的 CSS 规则,并作为规则进入级联,位于
用户代理来源 或
特殊目的 作者呈现提示来源 之间,位于常规的 用户来源 和
作者
来源 之间。
在 级联 的目的下,这个 作者呈现提示来源
被视为独立的 来源,
但在 revert 关键字的目的下
它被视为 的一部分。
文档语言可以定义这样的呈现提示是否作为 级联 进入 用户代理来源 或 作者来源; 如果是这样,用户代理必须相应地表现。 例如,[SVG11] 将其呈现属性映射到 。
注意: 作为 级联 进入的呈现提示,如果作为 用户代理来源 规则,则可以被 作者来源 或 用户来源 样式覆盖。 作为 作者呈现提示来源 规则进入的呈现提示 可以被 样式覆盖, 但不能被非 重要 的 用户来源 样式覆盖。 主机语言应考虑这些因素选择适当的呈现提示来源。
7. 默认值
当 级联 不产生值时, 指定值 必须以其他方式找到。 继承属性 从其父元素通过 继承 获取默认值; 所有其他属性采用其 初始值。 作者可以通过 inherit 和 initial 关键字明确请求继承或初始化。
7.1. 初始值
每个属性都有一个 初始值, 在属性的定义表中定义。 如果该属性不是 继承属性, 并且 级联 不产生值, 那么该属性的 指定值 就是它的 初始值。
7.2. 继承
继承 将属性值从父元素传播到其子元素。 一个元素上属性的继承值是该属性在元素父元素上的计算值。 对于根元素,根元素没有父元素,继承值是该属性的初始值。
对于一个带有阴影的[DOM]树,继承在扁平元素树上操作。这意味着被插槽元素继承自它们被分配的插槽
,
而不是直接从它们的光树父元素。 伪元素根据为每个伪元素描述的虚构标签序列进行继承。[CSS-PSEUDO-4]
某些属性是继承属性,在其属性定义表中定义。 这意味着,除非级联结果产生一个值, 否则值将由继承决定。
一个属性也可以被显式继承。请参见inherit关键字。
注意:继承遵循文档树,不受匿名盒子的拦截, 或者不受盒子树的操作影响。
7.3. 显式默认
以下定义了几个CSS范围内的属性值; 显式声明一个属性具有这些值会明确指定特定的默认行为。 如CSS值和单位 [css-values-3]中所规定的, 所有CSS属性都可以接受这些值。
7.3.1. 重置属性:initial关键字
如果一个属性的级联值是 initial关键字, 那么该属性的指定值是其初始值。
7.3.2. 显式继承:inherit关键字
如果一个属性的级联值是 inherit关键字, 那么该属性的指定 和计算值是继承值。
7.3.3. 擦除所有声明:unset关键字
如果一个属性的级联值是 unset关键字, 那么如果它是一个继承属性,这被视为inherit, 如果不是,这被视为initial。 这个关键字有效地擦除了在级联中出现的所有声明值, 正确继承或不继承,视属性的情况而定 (或所有简写属性的所有长属性)。
7.3.4. 回滚级联来源: revert 关键字
如果属性的级联值是 revert 关键字,行为取决于声明所属的级联来源:
- 用户代理来源
- 相当于 unset。
- 用户来源
- 将级联值回滚到用户代理级别, 使得指定值的计算 如同没有为此属性在此元素上指定任何作者来源或用户来源规则。
- 作者 来源
- 将级联值回滚到用户级别, 使得指定值的计算 如同没有为此属性在此元素上指定任何作者来源规则。 对于revert的目的,这个来源包括动画来源。
8. 更改
8.1. 自 2021年10月15日工作草案以来的更改
自2021年10月15日工作草案以来的非平凡更改:
-
更新@import语法以支持媒体查询和条件
-
允许功能表示法解析时别名
-
定义以Fetch的方式获取@import
-
添加§ 4.1.1 值别名部分。 (问题 6193)
8.2. 自2018年8月28日候选推荐以来的更改
自2021年3月19日工作草案以来的非平凡更改包括:
自2020年8月18日工作草案以来的非平凡更改包括:
- 移除了遗留名称别名映射值空间子集的可能性, 因为它们是简单名称别名。 (问题 4839)
- 为适用性概念设定了自己的章节 并增加了一些关于影响的注释。 (问题1861和5565)
- 定义了属性的术语。 (问题 5633)
-
定义了不属于树的元素的值处理。
(问题1964和1548)
不连接或不属于文档的连接的元素不参与CSS值处理, 并且没有声明、级联、指定、计算、使用或实际值, 即使它们可能有分配给它们的样式声明 (例如,通过
style
属性)。 - 澄清了关于怪癖模式内容类型假设的来源比较 在§ 2.3 CSS样式表的内容类型中。 (问题 4838)
自2018年8月28日候选推荐以来的非平凡更改包括:
8.3. 自2016年1月14日候选建议书以来的变化
自2016年1月14日工作草案以来的非琐碎更改包括:
- 精确地定义了CSS使用的别名类型。 (问题866) 见§ 3.1 属性别名。
-
澄清了revert仅影响级联值,而非继承值。
-
澄清自定义属性不受all简写的重置影响。
(2518)
all属性是一个简写,重置 所有 CSS 属性 除direction和unicode-bidi外的所有属性。 … 它不会重置自定义属性 [css-variables-1]。
-
更精确地定义了导入样式表是如何与导入样式表分开解释的,
在规则的排序等方面。
如果@import规则引用有效样式表, 用户代理必须将样式表的内容视为直接替代 @import规则的内容 ,有两个例外:
- 如果一个特性 (例如@namespace规则)明确定义仅适用于特定样式表, 而不适用于任何导入样式表, 那么它不适用于导入样式表。
- 如果一个特性依赖于样式表中两个或多个构造的相对排序 (例如@charset不能有任何其他内容在前), 它仅适用于同一样式表中的构造。
-
指定文本节点被视为其父元素的子节点,
并通过默认样式接收样式,
因为它们的属性现在与其内联父元素的属性可观察到的不同
通过display: contents [css-display-3]。
根据本规范,文本节点被视为元素 的子节点,并拥有完整的属性集; 由于它们不能被选择器目标化 它们所有的计算值都是通过默认样式赋值的。
- 删除了任何关于过时的“覆盖”来源的提及, 该来源最初由DOM Level 2 Style定义,后来被弃用。 (问题1385)
可用评论处置。
8.4. 自2015年4月21日工作草案以来的变化
自2015年4月21日工作草案以来的变化包括:
- 将default关键字重命名为revert。
- 允许在仅包含一个声明的supports()语法中省略重复的括号。
8.5. 自第3级以来的新增内容
自第3级以来,新增的功能包括:
-
引入revert关键字,用于回滚级联效果。
-
引入supports()语法,用于支持条件@import 规则。
-
定义了CSS用于支持遗留语法的两种别名机制。请参见§ 3.1 属性别名。
8.6. 自第2级以来的新增内容
自第2级以来,新增的功能包括:
致谢
David Baron、Tantek Çelik、Simon Sapin、Noam Rosenthal 和 Boris Zbarsky 对本规范做出了贡献。
隐私和安全考虑
-
级联过程不区分同源和跨源样式表,使得可以推断跨源样式表对文档应用的计算样式的内容。
-
通过应用样式规则表达的用户偏好和用户代理默认设置通过级联过程暴露,并且可以从它们对文档应用的计算样式中推断出来。
-
@import规则假设没有
Content-Type
元数据的资源(或任何同源文件,如果主文档处于怪癖模式) 是text/css
,这可能允许任意文件被导入到页面中并被解释为CSS, 从而可能允许敏感数据从它们对文档应用的计算样式中推断出来。