CSS 级联与继承 第 4 级

W3C 候选推荐快照,

关于此文档的更多详情
此版本:
https://www.w3.org/TR/2022/CR-css-cascade-4-20220113/
最新发布版本:
https://www.w3.org/TR/css-cascade-4/
编辑草案:
https://drafts.csswg.org/css-cascade-4/
以前的版本:
历史:
https://www.w3.org/standards/history/css-cascade-4
实施报告:
https://wpt.fyi/results/css/css-cascade
反馈:
CSSWG 问题库
编辑:
Elika J. Etemad / fantasai (受邀专家)
Tab Atkins Jr. (谷歌)
建议对此规范进行编辑:
GitHub 编辑器

摘要

本 CSS 模块描述了如何整理样式规则并为所有元素的所有属性分配值。通过层叠和继承,值会传播到所有元素的所有属性。

此版本新增了 revert 关键字和 <supports-condition> 用于 @import 规则。

CSS 是一种用于描述结构化文档(如 HTML 和 XML)在屏幕、纸张等上呈现的语言。

该文档的状态

本节描述了该文档在发布时的状态。 当前W3C出版物的列表 以及该技术报告的最新修订 可以在W3C技术报告索引中找到, https://www.w3.org/TR/.

该文档由CSS工作组候选推荐快照的形式发布,使用推荐轨道。 作为候选推荐的发布 并不意味着获得W3C及其成员的认可。 候选推荐快照已收到广泛审查, 旨在收集实施经验,并获得工作组成员的承诺,提供免版税许可用于实施。 本文档旨在成为W3C推荐; 它将至少保持为候选推荐,直到以收集更多反馈。

请通过在GitHub上提交问题(首选)发送反馈, 包括在标题中使用规范代码“css-cascade”,格式为: “[css-cascade] …评论摘要…”。 所有问题和评论均被存档。 或者,可以将反馈发送到(存档)公共邮件列表www-style@w3.org

本文件受2021年11月2日W3C流程文件管理。

本文件由一个遵循W3C专利政策的团体制作。 W3C维护一个任何专利披露的公开列表, 该列表包含有关该小组交付成果的专利披露; 该页面还包括披露专利的说明。 任何对包含实质性权利要求的专利有实际了解的个人 必须按照W3C专利政策第6节的规定披露信息。

1. 引言

CSS 定义了一组有限的参数,称为 属性,用于指导文档的渲染。每个 属性 都有一个名称(例如,colorfont-sizeborder-style),一个值空间(例如,<color><length-percentage>[ solid | dashed | dotted | … ]),以及对文档渲染的定义行为。属性值通过 属性声明 分配给文档的各个部分,给属性赋值(例如 red12ptdotted)以供关联元素或框使用。

CSS 的基本设计原则之一是 级联,它允许多个样式表影响文档的表现。当不同的声明试图为同一元素/属性组合设置值时,必须以某种方式解决冲突。

当没有声明试图为元素/属性组合设置值时,问题则相反。在这种情况下,可以通过 继承 或查看属性的 初始值 来找到一个值。

级联默认 过程将一组声明作为输入,并为每个元素上的每个属性输出一个 指定值

找到文档中所有元素上所有属性的指定值的规则在本规范中有描述。页面上下文及其边距框中指定值的查找规则在 [css-page-3] 中描述。

1.1. 模块交互

本节为规范性。

本模块替代并扩展了在 [CSS2] 第 6 章中定义的属性值分配、级联和继承规则。

其他 CSS 模块可能会扩展此处定义的一些语法和特性的定义。例如,媒体查询第 4 级规范与本模块结合使用时,扩展了在本规范中使用的 <media-query> 值类型的定义。

为了本规范的目的,文本节点 被视为其关联元素的 元素 子节点,并拥有完整的属性集;由于它们不能被选择器定位,因此它们的所有计算值均由 默认 赋值。

2. 导入样式表:@import 规则

@import 规则允许用户从其他样式表中导入样式规则。 如果 @import 规则引用一个有效的样式表, 用户代理必须将样式表的内容视为直接写在 @import 规则的位置, 但有两个例外:

例如, 从导入样式表中的样式规则的声明与级联的交互 就好像它们字面上写在样式表中,位于@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 规则 仅在用户代理 支持 display: flex 时加载样式表, 并且仅在 手持 设备 的 最大视口宽度 为 400px 时应用样式表。
@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);

如果提供了 <string>, 它必须被解释为具有相同值的 <url>

以下行在意义上是等价的 并展示了两种 @import 语法 (一种使用 url(),另一种使用裸字符串):
@import "mystyle.css";
@import url("mystyle.css");

2.1. 条件 @import 规则

导入条件 允许导入依赖于媒体或特性支持。 如果没有任何 导入条件,则导入是 无条件的。 (为 所有 指定 <媒体查询列表> 具有相同的效果。) 如果 导入条件 不匹配, 导入样式表中的规则不适用, 就好像导入样式表被包裹在 @media 和/或 @supports 块中,且具有给定条件。

以下规则说明了如何使 @import 规则 依赖于媒体:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

用户代理因此可以避免获取条件导入 只要 导入条件 不匹配。 此外,如果 <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]

获取一个 @import,给定一个 @import 规则 rule:
  1. parentStylesheetrule父 CSS 样式表[CSSOM]

  2. 如果 rule 有一个 <supports-condition>, 而该条件不为真, 则返回。

  3. parsedUrlURL 解析器 步骤的结果,使用 rule 的 URL 和 parentStylesheet位置。 如果算法返回错误, 则返回。 [CSSOM]

  4. parsedUrl 获取样式资源, 使用样式表 parentStylesheet, 目标为“样式”, CORS 模式为“no-cors”, 处理响应的步骤如下,给定 响应 response 和 字节流,null 或失败 byteStream

    1. 如果 maybeByteStream 不是字节流,返回。

    2. 如果 parentStylesheet怪异模式 中,且 responseCORS-同源, 让 content type"text/css"。 否则,让 content typeresponse 的内容类型元数据。

    3. 如果 content type 不是 "text/css", 返回。

    4. importedStylesheet解析 byteStram 的结果,给定 parsedUrl

    5. importedStylesheet源清洁标志 设置为 parentStylesheet源清洁标志

    6. 如果 response 不是 CORS-同源,则取消设置 importedStylesheet源清洁标志

    7. rulestyleSheet 设置为 importedStylesheet

2.3. CSS 样式表的 Content-Type

导入样式表的处理依赖于链接资源的实际类型:

如果链接资源的类型为 text/css, 则必须将其解释为 CSS 样式表。 否则,必须将其解释为网络错误。

3. 简写属性

一些属性是 简写属性, 这意味着它们允许作者通过单一属性指定多个属性的值。 简写属性 设置所有的 长属性, 就像在原地展开一样。

当在 简写 形式中省略值时, 除非另有定义, 否则每个“缺失”的 长属性 被赋予 其 初始值

这意味着 简写 属性声明始终设置 所有长属性, 即使这些属性并未明确设置。 随意使用时,这可能会导致意外重置一些 长属性。 小心使用时,简写 可以通过重置 长属性 确保“空白状态”,以防不小心从其他来源级联而来。

例如,写 background: green 而不是 background-color: green 可以确保背景颜色 覆盖任何可能已将背景设置为带有 背景图像 的早期声明。

例如,CSS 级别 1 font 属性 是一个 简写 属性,用于同时设置 font-stylefont-variantfont-weightfont-sizeline-heightfont-family。 此示例的多个声明:
h1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal;
}

因此可以重写为

h1 { font: bold 12pt/14pt Helvetica }

随着更多 font 长属性 被引入到 CSS 中, 简写声明也会将这些重置为其初始值。

在某些情况下,简写 可能具有不同的语法或特殊关键字,这些关键字与其 子属性 的值不直接对应。 (在这种情况下,简写 将明确定义其值的扩展。)

在其他情况下,某个属性可能是 仅重置子属性 的简写:像其他 子属性,它在未指定时被简写重置为其初始值,但简写可能不包括将 子属性 设置为其其他值的语法。例如,border 简写将 border-image 重置为其初始值 none,但没有语法将其设置为其他值。[css-backgrounds-3]

如果 简写 被指定为其中一个 CSS 全局关键字 [css-values-3],它将所有的 子属性 设置为该关键字,包括任何 仅重置子属性。 (请注意,这些关键字不能与单个声明中的其他值组合,即使在简写中也不行。)

声明一个 简写 属性为 !important 相当于将所有的 子属性 声明为 !important

3.1. 属性别名

属性有时在被支持一段时间后会更改名称,例如供应商前缀属性被标准化。原始名称仍需出于兼容性原因得到支持,但新名称是首选。为此,CSS 定义了两种不同的方式来“别名”旧语法到新语法。

遗留名称别名
当旧属性的值语法与新属性相同时,这两个名称通过类似于大小写映射的操作进行别名处理:在解析时,旧属性被转换为新属性。此转换在 CSSOM 中也适用,无论是字符串参数还是属性访问器:对旧属性名称的请求会透明地转移到新属性名称上。
例如,如果 old-name遗留名称别名,指向 new-namegetComputedStyle(el).oldName 将返回 newName 属性的计算样式,而 el.style.setPropertyValue("old-name", "value") 将把 new-name 属性设置为 "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 将返回 "always"。但是,在序列化样式块时(见 CSSOM 1 § 6.7.2 序列化 CSS 值),page-break-before 属性绝不会被选为序列化的简写,无论是它还是 break-before 被指定;相反,break-before 将始终被选中。

3.2. 重置所有属性:all 属性

名称: all
值: initial | inherit | unset | revert
初始: 见各个属性
适用对象: 见各个属性
继承: 见各个属性
百分比: 见各个属性
计算值: 见各个属性
动画类型: 见各个属性
规范顺序: 根据语法

all 属性是一个 简写,可以重置 所有 CSS 属性,除了 directionunicode-bidi。它仅接受 CSS-wide 关键字。它不会重置 自定义属性 [css-variables-1]

注意: 被排除的 CSS 属性 directionunicode-bidi 实际上是标记级特性,不应在作者样式表中设置。(它们作为 CSS 属性的存在仅是为了样式化用户代理不支持的文档语言。)作者应使用适当的标记,例如 HTML 的 dir 属性。

例如,如果作者在元素上指定 all: initial,它将阻止所有继承并重置所有属性,就像在作者、用户或用户代理级别的级联中没有出现任何规则一样。

这对于包含在页面中的“组件”的根元素很有用,该元素不希望继承外部页面的样式。然而,请注意,应用于该元素的任何“默认”样式(例如,例如来自于块元素的用户代理样式表上的 display: block)也将被清除。

4. 值处理

一旦用户代理解析了文档并构建了文档树,必须为 扁平树 中的每个元素,以及格式化结构中的每个盒子,分配一个适用于目标媒体类型的每个属性的值。

给定元素或盒子的 CSS 属性的最终值是多步骤计算的结果:

  1. 首先,收集应用于元素的所有 声明值,对于每个元素上的每个属性。该元素可能有零个或多个 声明值
  2. 层叠产生 层叠值。每个属性每个元素最多有一个 层叠值
  3. 默认产生 指定值。每个元素对于每个属性都有一个 指定值
  4. 解析值依赖关系产生 计算值。每个元素对于每个属性都有一个 计算值
  5. 格式化文档产生 使用值。元素仅在该属性适用于元素时才有 使用值
  6. 最后,使用值根据显示环境的限制转化为 实际值。与 使用值 一样,对于给定属性在元素上可能存在或不存在 实际值

连接 或不属于文档的 扁平化元素树 的元素不参与 CSS 值处理,也没有 声明层叠指定计算使用实际 值,即使它们可能被分配了样式声明(例如,通过 style 属性)。

4.1. 声明值

每个属性声明 应用于一个元素 为该属性贡献一个与元素关联的 声明值。有关详细信息,请参见 过滤声明

这些值随后通过 层叠 进行处理,以选择一个单一的“胜利值”。

4.1.1. 值别名

某些属性值具有 遗留值别名:在解析时,遗留语法被转换为新语法,导致 声明值 与解析输入不同。这些别名通常用于处理遗留兼容性要求,例如将 厂商前缀 的值转换为其标准等价物。

4.2. 层叠值

层叠值 代表 层叠 的结果:它是赢得层叠的 声明值(在 层叠的输出 中首先排序)。如果 层叠的输出 是空列表,则没有 层叠值

4.3. 指定值

指定值 是样式表作者为该元素意图设定的给定属性的值。它是将 层叠值 通过 默认化 过程的结果,保证每个元素的每个属性都有 指定值

在许多情况下,指定值层叠值。然而,如果根本没有 层叠值,则 指定值 将被 默认化CSS-wide 关键字 在它们是属性的 层叠值 时会特别处理,设置 指定值,如该关键字要求的,见 § 7.3 显式默认化

4.4. 计算值

计算值 是 解析 指定值 的结果,正如在属性定义表的“计算值”行中定义的那样, 通常在为 继承 做准备时对其进行绝对化处理。

注意: 计算值 是在 继承 期间从父级传递给子级的值。 出于历史原因, 它不一定是由 getComputedStyle() 函数返回的值, 有时返回的是 使用值[CSSOM] 此外,计算值 是一种抽象数据表示: 它们的定义反映了这种数据表示,而不是数据如何序列化。 例如,序列化规则通常允许省略某些在解析期间隐含的值; 但这些值仍然是 计算值 的一部分。

一个 指定值 可以是绝对的(即不相对于另一个值,如 红色2mm) 或相对的(即相对于另一个值,如 自动, 2em)。 计算相对值通常将其绝对化:

请参见下表中的示例 (f)、(g) 和 (h)。

注意: 一般而言, 计算值 尽可能解决 指定值,而无需布局文档 或执行其他昂贵或难以并行化的操作, 例如解析网络请求 或从元素及其父元素获取值以外的值。

即使属性不适用, 计算值 仍然存在。 然而,某些属性可能会根据属性是否 应用于 元素而改变其确定 计算值 的方式。

4.5. 使用值

使用值 是 通过取 计算值 并完成任何剩余的计算以使其成为 在文档格式中使用的绝对理论值。

例如,声明 width: auto 无法在不知道元素祖先的布局的情况下解析为长度, 因此 计算值自动, 而 使用值 是一个绝对 长度,例如 100px[CSS2]

另一个例子,一个 <div> 可能具有计算的 break-before 值为 自动, 但通过从其第一个子元素传播获得一个使用的 break-before 值为 页面[css-break-3]

如果某个属性不 适用于 此元素或框类型, 则它对于该属性没有 使用值

例如, flex 属性在不是 flex 项 的元素上没有 使用值

4.5.1. 适用属性

如果某个属性不 适用于 某个元素或框类型——如其“适用范围”行中所述——这意味着它不会直接对该类型的框或元素生效。

注意: 不适用的属性仍然可以有 间接 格式化效果 如果其计算值影响适用其他属性的计算; 当然,其 计算值, 总是存在, 仍然可以继承给后代并对其生效。

尽管 writing-modetext-orientation 不适用于表行 (它们不会影响表行或其子元素的布局), 在这样的框上设置它们仍然会影响字体相对单位的计算,例如 ch, 因此可能影响任何需要 <length> 的属性。
在 HTML text-transform 元素上设置 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. 示例

CSS 值计算示例
属性 胜利声明 级联值 指定值 计算值 使用值 实际值
(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. 过滤

为了找到声明值, 实现必须首先识别适用于每个元素的所有声明。 如果声明适用于元素,则该声明适用:

适用的声明的值形成每个元素每个属性的声明值列表。 下一部分, 级联, 优先考虑这些列表。

6. 级联

级联采取一个无序 的声明值列表, 对于给定属性的给定元素, 根据声明的优先级进行排序,并输出单个级联值

6.1. 级联排序顺序

级联根据以下标准对声明进行排序, 按优先级降序排列:

来源与重要性
声明的来源基于其来源 及其重要性 是否用!important声明(见下文)。 各种来源的优先级为,按降序排列:
  1. 过渡声明[css-transitions-1]
  2. 重要 用户代理 声明
  3. 重要 用户 声明
  4. 重要 作者声明
  5. 动画声明[css-animations-1]
  6. 普通 作者声明
  7. 普通 用户声明
  8. 普通 用户代理声明

来自来源的声明在 此列表中越早,优先级越高。

上下文
文档语言可以提供来自不同封装上下文的混合声明, 例如嵌套的树上下文影子树中的 [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,则该声明为 重要。 所有其他声明为 正常(非重要)。

[hidden] { display: none !important; }

一个重要声明优先于正常声明。 作者和用户样式表可以包含重要声明, 用户来源 重要声明会覆盖作者来源 重要 声明。 这一 CSS 特性提高了文档的可访问性 使具有特殊需求的用户 (大字体、颜色组合等) 能够控制呈现。

重要 声明来自所有来源,优先于动画。 这允许作者在重要情况下覆盖动画值。 (动画值通常会覆盖所有其他规则。) [css-animations-1]

用户代理样式表 也可以包含重要 声明。 这些会覆盖所有作者用户声明。

用户样式表中的第一个规则包含一个!important声明, 覆盖了作者样式表中的相应声明。 第二个规则中的声明也会胜出,因为它被标记为!important。 然而,用户样式表中的第三个声明不是!important,因此会输给作者样式表中的第二个规则 (该规则恰好设置了简写属性的样式)。 此外,第三个作者规则会输给第二个作者规则,因为第二个声明是!important。 这表明!important声明在作者样式表中也有作用。
/* 来自用户样式表 */
p { text-indent: 1em !important }
p { font-style: italic !important }
p { font-size: 18pt }

/* 来自作者样式表 */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }
属性 胜出的值
text-indent 1em
font-style italic
font-size 12pt
font-family sans-serif

6.4. 非 CSS 呈现提示的优先级

用户代理可能选择尊重源文档标记中的呈现提示,例如 bgcolor 属性或 s 元素在 [HTML] 中。 所有基于文档语言的样式必须转换为相应的 CSS 规则,并作为规则进入级联,位于 用户代理来源 或 特殊目的 作者呈现提示来源 之间,位于常规的 用户来源作者 来源 之间。 在 级联 的目的下,这个 作者呈现提示来源 被视为独立的 来源, 但在 revert 关键字的目的下 它被视为 作者来源 的一部分。

文档语言可以定义这样的呈现提示是否作为 级联 进入 用户代理来源作者来源; 如果是这样,用户代理必须相应地表现。 例如,[SVG11] 将其呈现属性映射到 作者来源

注意: 作为 级联 进入的呈现提示,如果作为 用户代理来源 规则,则可以被 作者来源用户来源 样式覆盖。 作为 作者呈现提示来源 规则进入的呈现提示 可以被 作者来源 样式覆盖, 但不能被非 重要用户来源 样式覆盖。 主机语言应考虑这些因素选择适当的呈现提示来源。

7. 默认值

级联 不产生值时, 指定值 必须以其他方式找到。 继承属性 从其父元素通过 继承 获取默认值; 所有其他属性采用其 初始值。 作者可以通过 inheritinitial 关键字明确请求继承或初始化。

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日工作草案以来的非平凡更改:

8.2. 自2018年8月28日候选推荐以来的更改

2021年3月19日工作草案以来的非平凡更改包括:

2020年8月18日工作草案以来的非平凡更改包括:

2018年8月28日候选推荐以来的非平凡更改包括:

8.3. 自2016年1月14日候选建议书以来的变化

2016年1月14日工作草案以来的非琐碎更改包括:

可用评论处置

8.4. 自2015年4月21日工作草案以来的变化

2015年4月21日工作草案以来的变化包括:

8.5. 自第3级以来的新增内容

第3级以来,新增的功能包括:

8.6. 自第2级以来的新增内容

第2级以来,新增的功能包括:

致谢

David Baron、Tantek Çelik、Simon Sapin、Noam Rosenthal 和 Boris Zbarsky 对本规范做出了贡献。

隐私和安全考虑

合规性

文档约定

合规性要求通过描述性断言和RFC 2119术语的组合表达。关键字“必须”、“必须不”、“要求”、“应”、“应不”、“应该”、“应该不”、“推荐”、“可以”和“可选”在本文件的规范部分应按RFC 2119中的描述进行解释。为了可读性,这些词在本规范中并不总是以全大写字母出现。

本规范的所有文本都是规范性的,除了明确标记为非规范性的部分、示例和注释。[RFC2119]

本规范中的示例以“例如”开头,或者与规范性文本用class="example"分开,如下所示:

这是一个信息性示例的例子。

信息性注释以“注释”开头,并且与规范性文本用class="note"分开,如下所示:

注释,这是一个信息性注释。

建议是规范性部分,样式上旨在引起特别注意,并且与其他规范性文本用<strong class="advisement">分开,如下所示: 用户代理必须提供可访问的替代方案。

合规性类别

本规范的合规性定义了三个合规性类别:

样式表
一个CSS样式表
渲染器
一个用户代理,解释样式表的语义并渲染使用它们的文档。
创作工具
一个用户代理,编写样式表。

如果样式表中使用本模块定义的语法的所有语句都根据通用CSS语法和本模块中定义的每个特性的单独语法是有效的,则该样式表符合本规范。

如果渲染器除了根据相应规范解释样式表外,还通过正确解析本规范定义的所有特性并相应渲染文档,则该渲染器符合本规范。然而,用户代理因设备限制而无法正确渲染文档并不意味着该用户代理不符合规范。(例如,用户代理不需要在单色显示器上渲染颜色。)

如果创作工具编写的样式表根据通用CSS语法和本模块中每个特性的单独语法是语法正确的,并且满足本模块中描述的样式表的所有其他合规性要求,则该创作工具符合本规范。

部分实现

为了让作者能够利用向前兼容的解析规则来分配后备值,CSS渲染器必须将任何没有可用支持级别的@规则、属性、属性值、关键字和其他语法构造视为无效(并适当忽略)。特别是,用户代理必须不选择性忽略不支持的组件值,并在单个多值属性声明中尊重支持的值:如果任何值被视为无效(不支持的值必须是这样),CSS要求忽略整个声明。

不稳定和专有功能的实现

为了避免与未来稳定的CSS功能冲突,CSS工作组建议遵循最佳实践来实现不稳定功能和专有扩展

非实验性实现

一旦规范达到候选推荐阶段,非实验性实现就可以进行,实施者应发布任何CR级特性的无前缀实现,只要他们能够证明其符合规范。

为了建立和维护CSS在实现之间的互操作性,CSS工作组请求非实验性的CSS渲染器在发布任何CSS功能的无前缀实现之前,向W3C提交实施报告(如有必要,提交用于该实施报告的测试用例)。提交给W3C的测试用例将受到CSS工作组的审查和更正。

有关提交测试用例和实施报告的更多信息,可以在CSS工作组的网站上找到https://www.w3.org/Style/CSS/Test/。问题应发送到public-css-testsuite@w3.org邮件列表。

CR退出标准

为了将该规范推进到提议推荐阶段,每个功能必须至少有两个独立的、互操作的实现。每个功能可以由不同的产品集实现,并不要求所有功能都由单一产品实现。为了满足此标准,我们定义以下术语:

独立
每个实现必须由不同的方开发,不能共享、重用或衍生自其他符合条件实现所使用的代码。与本规范的实现无关的代码部分不受此要求的限制。
互操作
通过官方CSS测试套件通过相应的测试用例,或者如果该实现不是Web浏览器,则通过等效测试。测试套件中的每个相关测试都应创建一个等效测试,以便在声称互操作性时使用此类用户代理(UA)。此外,如果要使用此类UA声称互操作性,则必须有一个或多个其他UA也可以以相同的方式通过这些等效测试以实现互操作性。等效测试必须公开可用,以便进行同行评审。
实现
一个用户代理:
  1. 实现该规范。
  2. 向公众开放。该实现可以是一个已发布的产品或其他公开可用的版本(即,测试版、预览版或“每日构建”)。非发布产品版本必须实现功能至少一个月,以证明其稳定性。
  3. 不是实验性的(即,专门设计用于通过测试套件且不打算用于未来的正常使用的版本)。

该规范将至少保持候选推荐状态六个月。

索引

本规范定义的术语

引用定义的术语

参考文献

规范性参考文献

[CSS-2021]
Tab Atkins Jr.; Elika Etemad; Florian Rivoal. CSS 快照 2021. 2021年12月31日。注释。网址:https://www.w3.org/TR/css-2021/
[CSS-ANIMATIONS-1]
Dean Jackson; 等。 CSS 动画级别 1. 2018年10月11日。WD。网址:https://www.w3.org/TR/css-animations-1/
[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS 背景和边框模块级别 3. 2021年7月26日。CR。网址:https://www.w3.org/TR/css-backgrounds-3/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS 颜色模块级别 4. 2021年12月15日。WD。网址:https://www.w3.org/TR/css-color-4/
[CSS-CONDITIONAL-3]
David Baron; Elika Etemad; Chris Lilley. CSS 条件规则模块级别 3. 2021年12月23日。CR。网址:https://www.w3.org/TR/css-conditional-3/
[CSS-CONDITIONAL-5]
David Baron; Elika Etemad; Chris Lilley. CSS 条件规则模块级别 5. 2021年12月21日。WD。网址:https://www.w3.org/TR/css-conditional-5/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS 显示模块级别 3. 2021年9月3日。CR。网址:https://www.w3.org/TR/css-display-3/
[CSS-FONTS-5]
Myles Maxfield; Chris Lilley. CSS 字体模块级别 5. 2021年12月21日。WD。网址:https://www.w3.org/TR/css-fonts-5/
[CSS-PSEUDO-4]
Daniel Glazman; Elika Etemad; Alan Stearns. CSS 伪元素模块级别 4. 2020年12月31日。WD。网址:https://www.w3.org/TR/css-pseudo-4/
[CSS-SCOPING-1]
Tab Atkins Jr.; Elika Etemad. CSS 范围模块级别 1. 2014年4月3日。WD。网址:https://www.w3.org/TR/css-scoping-1/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS 语法模块级别 3. 2021年12月24日。CR。网址:https://www.w3.org/TR/css-syntax-3/
[CSS-TRANSITIONS-1]
David Baron; 等。 CSS 过渡. 2018年10月11日。WD。网址:https://www.w3.org/TR/css-transitions-1/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS 值和单位模块级别 3. 2019年6月6日。CR。网址:https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS 值和单位模块级别 4. 2021年12月16日。WD。网址:https://www.w3.org/TR/css-values-4/
[CSS-VARIABLES-1]
Tab Atkins Jr.. CSS 自定义属性的级联变量模块级别 1. 2021年11月11日。CR。网址:https://www.w3.org/TR/css-variables-1/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS 写作模式级别 3. 2019年12月10日。REC。网址:https://www.w3.org/TR/css-writing-modes-3/
[CSS2]
Bert Bos; 等。 层叠样式表第 2 级修订版 1 (CSS 2.1) 规范. 2011年6月7日。REC。网址:https://www.w3.org/TR/CSS21/
[CSSOM]
Daniel Glazman; Emilio Cobos Álvarez. CSS 对象模型 (CSSOM). 2021年8月26日。WD。网址:https://www.w3.org/TR/cssom-1/
[DOM]
Anne van Kesteren. DOM 标准. 现行标准。网址:https://dom.spec.whatwg.org/
[FETCH]
Anne van Kesteren. Fetch 标准. 现行标准。网址:https://fetch.spec.whatwg.org/
[HTML]
Anne van Kesteren; 等。 HTML 标准. 现行标准。网址:https://html.spec.whatwg.org/multipage/
[MEDIAQ]
Florian Rivoal; Tab Atkins Jr.. 媒体查询级别 4. 2021年12月25日。CR。网址:https://www.w3.org/TR/mediaqueries-4/
[RFC2119]
S. Bradner. RFC 中用于指示要求级别的关键词. 1997年3月。最佳现行实践。网址:https://datatracker.ietf.org/doc/html/rfc2119
[SELECT]
Tantek Çelik; 等。 选择器级别 3. 2018年11月6日。REC。网址:https://www.w3.org/TR/selectors-3/
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr.. 选择器级别 4. 2018年11月21日。WD。网址:https://www.w3.org/TR/selectors-4/
[URL]
Anne van Kesteren. URL 标准. 现行标准。网址:https://url.spec.whatwg.org/

参考文献

[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS 盒子对齐模块第 3 级. 2021年12月24日。WD。网址:https://www.w3.org/TR/css-align-3/
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad. CSS 分页模块第 3 级. 2018年12月4日。CR。网址:https://www.w3.org/TR/css-break-3/
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS 分页模块第 4 级. 2018年12月18日。WD。网址:https://www.w3.org/TR/css-break-4/
[CSS-FLEXBOX-1]
Tab Atkins Jr.; 等。 CSS 弹性盒子布局模块第 1 级. 2018年11月19日。CR。网址:https://www.w3.org/TR/css-flexbox-1/
[CSS-FONTS-4]
John Daggett; Myles Maxfield; Chris Lilley. CSS 字体模块第 4 级. 2021年12月21日。WD。网址:https://www.w3.org/TR/css-fonts-4/
[CSS-INLINE-3]
Dave Cramer; Elika Etemad; Steve Zilles. CSS 行内布局模块第 3 级. 2020年8月27日。WD。网址:https://www.w3.org/TR/css-inline-3/
[CSS-LISTS-3]
Elika Etemad; Tab Atkins Jr.. CSS 列表和计数器模块第 3 级. 2020年11月17日。WD。网址:https://www.w3.org/TR/css-lists-3/
[CSS-PAGE-3]
Elika Etemad; Simon Sapin. CSS 分页媒体模块第 3 级. 2018年10月18日。WD。网址:https://www.w3.org/TR/css-page-3/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS 盒子尺寸模块第 3 级. 2021年12月17日。WD。网址:https://www.w3.org/TR/css-sizing-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS 文本模块第 3 级. 2021年4月22日。CR。网址:https://www.w3.org/TR/css-text-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS 排版模式第 4 级. 2019年7月30日。CR。网址:https://www.w3.org/TR/css-writing-modes-4/
[SVG11]
Erik Dahlström; 等。 可缩放矢量图形 (SVG) 1.1 (第二版). 2011年8月16日。REC。网址:https://www.w3.org/TR/SVG11/

属性索引

名称 初始值 适用对象 继承 %ages 动画类型 规范顺序 计算值
所有 initial | inherit | unset | revert 见各个属性 见各个属性 见各个属性 见各个属性 见各个属性 按语法 见各个属性