CSS 层叠和继承 第 5 级

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 位置处编写时相同。

任何 @import 规则必须位于样式表中所有其他有效的 at 规则和样式规则之前 （忽略 @charset 和空的 @layer 定义）， 并且在它与之前的 @import 规则之间不能有任何其他有效的 at 规则或样式规则， 否则 @import 规则无效。 @import 的语法如下：

@import [ <url> | <string> ]
        [ layer | layer(<layer-name>) ]?
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

其中：

• <url> 或 <string> 指定要导入的样式表的 URL。

• 可选的 layer 关键字或 layer() 函数将样式表内容分配到其自身的匿名 层叠层 或命名的 层叠层 中。

  即使导入失败，层仍会添加到 层顺序 中， 但受任何 导入条件 的限制（就像由 @layer 规则在适当的 条件组规则中声明一样）。

• 可选的 [<supports-condition>|<declaration>] 和 <media-query-list>（统称为 导入条件） 声明其适用的条件。

@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);

@import url("tabs.css") layer(framework.component);
@import url("override.css") layer();

如果提供了 <string>， 则必须将其解释为具有相同值的 <url>。

@import "mystyle.css";
@import url("mystyle.css");

2.1. 条件 @import 规则

导入条件 允许导入样式表根据媒体或特性支持。 如果没有任何 导入条件，则导入是无条件的。 （为 <media-query-list> 指定 all 具有相同的效果。） 如果 导入条件 不匹配， 则导入的样式表中的规则不适用， 就像导入的样式表被包裹在 @media 和/或 @supports 块中一样。

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

因此，只要 导入条件 不匹配， 用户代理可以避免获取条件导入。 此外，如果 <supports-condition> 阻止了导入的样式表的应用， 用户代理 不得 获取样式表（除非它通过其他链接加载）， 并且 必须 返回 null 作为导入规则的 CSSImportRule.styleSheet 值 （即使它通过其他链接加载）。

@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
  ...
}

导入条件 由 <media-query-list> 给出，并被解析和解释为 媒体查询列表， 以及 <supports-condition>，解析和解释为 [[supports query]]。 如果提供了 <declaration> 代替 <supports-condition>， 则必须将其解释为 <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]

2.3. CSS 样式表的内容类型

导入样式表的处理取决于所链接资源的实际类型：

• 如果资源没有Content-Type 元数据， 则其类型被视为 text/css。

• 如果宿主文档处于怪异模式， 并且宿主文档的源与所链接资源响应的 URL 的源同源， 则其类型被视为 text/css。

• 否则，其类型由其Content-Type 元数据确定。

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

3. 简写属性

某些属性是简写属性， 这意味着它们允许作者使用单个属性指定多个属性的值。 一个简写属性 会设置其所有长写子属性， 就如同在原位置展开一样。

当简写形式中省略了值时， 除非另有定义， 每个“缺失的”子属性都会被赋予 其初始值。

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 }

在某些情况下，简写可能具有不同的语法 或特殊关键字， 它们并不直接对应于其子属性的值。 （在这种情况下，简写会显式定义其值的 展开方式。）

在其他情况下，某个属性可能是简写的仅重置子属性： 与其他子属性一样，当未指定时，它会被简写重置 为其初始值， 但简写中可能不包含将该子属性设置为 其任何其他值的语法。例如，border 简写会将 border-image 重置为其初始值 none， 但没有将其设置为其他值的语法。[css-backgrounds-3]

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

将一个简写 属性声明为 !important，等同于将其所有子属性声明为 !important。

3.1. 属性别名

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

旧名称别名

当旧属性的值语法与新属性的值语法相同时， 两个名称通过类似于大小写映射的操作进行别名化： 在解析时，将旧属性转换为新属性。 此转换也适用于 CSSOM， 无论是字符串参数还是属性访问器： 对旧属性名的请求透明地转移到新属性名。

例如，如果 old-name 是 旧名称别名 对于 new-name， getComputedStyle(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 属性是一种 简写，用于重置所有 CSS 属性， 除了 direction 和 unicode-bidi。 它只接受 CSS 宽泛关键字。 它不会重置 自定义属性 [css-variables-1]。

注意： 被排除的 CSS 属性 direction 和 unicode-bidi 实际上是标记级特性， 不应在作者的样式表中设置。 （它们作为 CSS 属性存在仅是为了样式化用户代理不支持的文档语言。） 作者应使用适当的标记，例如 HTML 的 dir 属性。[css-writing-modes-3]

4. 值处理

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

给定元素或框的 CSS 属性的最终值是多步计算的结果：

1. 首先，收集应用于元素的每个属性的所有声明值。 每个元素上可能有零个或多个声明值。
2. 层叠确定层叠值。 每个元素的每个属性最多有一个层叠值。
3. 默认值确定指定值。 每个元素的每个属性有且仅有一个指定值。
4. 解决值依赖关系后得出计算值。 每个元素的每个属性有且仅有一个计算值。
5. 格式化文档后得出使用值。 只有当属性适用于该元素时，元素才有该属性的使用值。
6. 最后，使用值根据显示环境的约束转换为实际值。 与使用值一样，可能会或不会存在某个属性的实际值。

未连接或不属于文档扁平化元素树的一部分的元素不参与 CSS 值处理， 因此没有声明值、层叠值、指定值、计算值、使用值或实际值， 即使它们可能有样式声明（例如通过style属性）赋予它们。

4.1. 声明值

应用于元素的每个属性声明应用于元素为该属性提供了一个声明值。 详情请参见过滤声明。

这些值然后通过层叠处理，以选择一个“获胜值”。

4.1.1. 值别名

一些属性值具有旧版值别名： 在解析时，旧版语法被转换为新语法， 结果是一个与解析输入不同的声明值。 这些别名通常用于处理旧版兼容性要求， 例如将供应商前缀值转换为它们的标准等价物。

4.2. 层叠值

层叠值表示层叠的结果： 它是赢得层叠的声明值 （在层叠输出中排序第一）。 如果层叠输出为空列表， 则没有层叠值。

4.3. 指定值

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

在许多情况下，指定 值就是层叠 值。 但是，如果根本不存在层叠值， 则指定值会取默认值。 当CSS 全局关键字是某个属性的层叠值时， 会对其进行特殊处理， 按照该关键字的要求设置指定值， 参见§ 7.3 显式默认化。

4.4. 计算值

计算值是 解析指定值的结果，如属性定义表中的“计算值”行所定义， 通常是在继承之前将其绝对化。

注： 计算值是在继承过程中从父元素传递给子元素的值。 由于历史原因， 它不一定是 getComputedStyle() 函数返回的值， 该函数有时会返回使用值。 [CSSOM] 此外，计算值是一种抽象数据表示： 它们的定义反映的是这种数据表示， 而不是该数据如何被序列化。 例如，序列化规则通常允许省略某些在解析过程中可推导出的值； 但这些值仍然是计算值的一部分。

注意： 通常来说，计算值尽可能解析指定值，而不进行文档布局 或其他昂贵且难以并行化的操作， 例如解析网络请求 或检索除该元素及其父元素之外的值。

计算值即使在属性不适用时也依然存在。 但是，某些属性可能会根据属性是否适用于元素来更改它们确定计算值的方式。

4.5. 使用值

使用值是 通过对计算值进行所有剩余的计算所得的结果，以使其成为用于格式化文档的绝对理论值。

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

另一个例子，一个 <div> 可能有一个break-before的计算值为 auto， 但通过从其第一个子元素中传播，获得一个使用的break-before值为 page。[css-break-3]

如果某个属性不适用于该元素或框类型， 那么它对于该属性没有使用值。

例如， flex 属性在不是 弹性项目的元素上没有 使用值。

4.5.1. 适用的属性

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

注意： 一个不适用的属性 仍然可能通过间接的方式影响格式化， 如果它的计算值影响到其他适用于该类型的属性的计算； 并且当然它的计算值， 无论如何存在， 仍然可以继承给后代元素 并对它们生效。

注意： 适用于“所有元素”的属性适用于所有元素和 display 类型， 但不一定适用于所有 伪元素 类型， 因为伪元素通常有它们自己特定的渲染模型 或其他限制。 然而，::before 和 ::after 伪元素被定义为几乎与正常元素生成的框相同， 因此被定义为接受所有适用于“所有元素”的属性。 参见[CSS-PSEUDO-4]了解更多关于 伪元素的信息。

4.6. 实际值

使用值原则上已准备好使用， 但用户代理在特定环境中可能无法使用该值。例如，用户代理可能只能以整数像素宽度渲染边框， 因此可能需要对使用的宽度进行近似。 此外，元素的字体大小可能需要根据字体的可用性或 font-size-adjust属性的值进行调整。 实际值是 在进行这些调整后得到的使用值。

注意： 通过探查元素的实际值，可以学到很多关于文档布局的信息。 然而，并非所有信息都记录在实际值中。 例如，page-break-after属性的实际值 并不反映元素之后是否有分页符。 同样，orphans的实际值 也不反映某个元素中的孤行数量。 参见下表中的示例 (j) 和 (k) 在下表中。

4.7. 示例

4.8. 按片段值处理

某些 CSS 特性可能会在每个片段的基础上干扰值的处理。 例如，参见 CSS Pseudo-Elements 4 § 2.1.3 Inheritance and the ::first-line Pseudo-element， 它改变了 ::first-line 伪元素中的片段的继承。 在这种情况下，个别片段被赋予了不同的指定值， 任何基于其他属性的计算值解析的值 （例如 currentcolor 或 em 单位） 都会在每个框片段中进行解析。 在每个片段中，后续的值处理正常进行。

假设每个框（而不是每个框片段）具有单一值的 API 必须忽略非树遵循的伪元素的影响。 （例如，::first-line 样式对 getComputedStyle() 返回的值没有影响。）

<div><span>First line<br />Second line</span></div>
<div><span>First line</span></div>
<div>First line<br><span>Second line</span></div>
<style>
div { color: blue; }
div::first-line { color: yellow; }
span { border: thin solid currentcolor; }
</style>

5. 过滤

为了找到声明的值， 实现必须首先识别所有适用于每个元素的声明。 如果声明符合以下条件之一，则适用于某个元素：

• 它属于当前适用于此文档的样式表。
• 它未被条件规则[CSS-CONDITIONAL-3]中为假的条件限定。
• 它属于样式规则，其选择器与该元素匹配。[SELECT]（如有必要，考虑作用域。）
• 它在语法上是有效的： 声明的属性是已知的属性名， 且声明的值与该属性的语法匹配。

适用的声明值形成了， 对于每个元素的每个属性， 一个声明值列表。 下一节， 层叠， 对这些列表进行优先级排序。

6. 层叠

层叠对给定元素的给定属性的无序 声明值列表， 根据下文确定的声明优先级进行排序， 并输出一个层叠值。

6.1. 层叠排序顺序

层叠根据以下标准对声明进行排序，按优先级从高到低排列：

来源和重要性

声明的来源取决于 它来自何处， 而其重要性则取决于 是否使用 !important 进行声明（参见下文）。 各种来源的优先级按降序排列如下：

1. 过渡声明 [css-transitions-1]
2. 重要的用户代理 声明
3. 重要的用户 声明
4. 重要的作者声明
5. 动画声明 [css-animations-1]
6. 普通的作者声明
7. 普通的用户声明
8. 普通的用户代理声明

此列表中较早的来源的声明优先于 较晚的来源的声明。

上下文

文档语言可以规定混合来自 不同封装上下文的声明， 例如 [DOM] 中影子 树的嵌套树上下文。

当比较两个 来自不同封装上下文的声明时， 对于普通规则， 来自外部上下文的声明优先， 而对于重要规则， 来自内部上下文的声明优先。 为此，[DOM] 树 上下文被视为按照包含影子树的树顺序嵌套。

注： 这实际上意味着，属于某个封装上下文的普通声明可以设置容易被外部上下文 覆盖的默认值， 而属于某个封装上下文的重要声明则可以强制实施 无法被外部上下文覆盖的要求。

附加到元素的样式

对普通声明和重要声明分别而言， 直接附加到元素的声明 （例如style 属性的内容） 而不是通过样式规则选择器间接映射的声明， 优先于通过样式规则映射的具有相同重要性的声明。

参见 [css-style-attr]。

注： 非 CSS 表现提示（例如表现性 标记） 会单独处理， 参见§ 6.5 非 CSS 表现提示的优先级。

层

每个来源和上下文 中的声明可以显式分配到一个层叠层。 就此步骤而言， 任何未分配到显式层的声明 都会被添加到一个隐式的最终层中。

层叠层（与声明一样）按出现顺序排列。 当比较属于不同层的声明时， 对于普通规则， 其层叠层最后的声明优先， 而对于重要规则， 其层叠层最先的声明优先。

注： 这遵循与对普通和重要的来源进行分层时所使用的相同逻辑， 因而 !important 标志在两种情况下都保持相同的“覆盖”作用。

优先级

选择器模块 [SELECT] 描述了如何计算选择器的优先级。 每个声明都具有与其所在样式规则相同的优先级。 优先级最高的声明胜出。

出现顺序

文档顺序中最后的声明胜出。 为此：

• 样式表按照最终 CSS 样式表中的顺序排列。
• 来自导入样式表的声明，其顺序如同其样式 表在 @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] 所定义。 所有其他声明都是普通的（非重要的）。

[hidden] { display: none !important; }

重要的声明优先于普通的声明。 作者和用户样式表中可以包含重要的声明， 其中用户来源的重要的声明 会覆盖作者来源的重要的声明。 这种 CSS 特性通过给予有特殊需求的用户 （大字体、颜色组合等） 对表现的控制，提高了文档的可访问性。

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

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

/* 来自用户样式表 */
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 }

6.4. 层叠层

就像层叠来源在用户和作者样式之间提供了平衡， 层叠层提供了一种结构化的方法， 用于在单一来源中组织和平衡各种需求。 单个层叠层中的规则彼此叠加， 而不会与层外的样式规则交织。

作者可以创建层来表示元素的默认值、 第三方库、主题、组件、 覆盖和其他样式需求，并能够以明确的方式重新排列层的层叠顺序， 而无需更改每个层中的选择器或特异性， 或依赖源代码顺序来解决层之间的冲突。

audio {
  /* specificity of 0,0,1 - implicit (final) layer */
  display: flex;
}

@layer reset {
  audio[controls] {
    /* specificity of 0,1,1 - explicit "reset" layer */
    display: block;
  }
}

定义名称的at-rule，例如在层叠层内部定义的 @keyframes 或 @font-face，在 解决名称冲突时也使用层的顺序。

/* establish the layer order, so the "override" layer takes precedence */
@layer framework, override;

@layer override {
  @keyframes slide-left {
    from { translate: 0; }
    to { translate: -100% 0; }
  }
}

@layer framework {
  @keyframes slide-left {
    from { margin-left: 0; }
    to { margin-left: -100%; }
  }
}

.sidebar { animation: slide-left 300ms; }

6.4.1. 声明层叠层

层叠层可以通过以下方式声明：

• 使用带有 layer 关键字或 layer() 函数的@import 规则， 将导入文件的内容分配到该层中。

• 使用@layer 块 at 规则， 将其子样式规则分配到该层中。

• 使用@layer 语句 at 规则， 声明一个不包含任何规则的命名层。

提供用于将 link 或 style 元素分配给层叠层的属性？[Issue #w3c/csswg-drafts#5853]

6.4.2. 层命名和嵌套

一个层叠层有一个层名称， 它是一个表示每个层嵌套级别的有序列表， 其中每个部分都可以命名（作为CSS 标识符）或匿名。 （因此，当一个层嵌套在另一个层中时， 其名称会连接在一起。） 当一个层在另一个层的范围内声明时， 它就是嵌套的， 例如，一个 @layer 规则在另一个 @layer 内， 一个嵌套导入中的@import， 或者一个嵌套导入中的 @layer 规则。

层名称如果包含相同顺序的相同部分， 则表示相同的层叠层； 然而，匿名部分在每次出现时都有唯一的身份。 请注意，嵌套可能导致多个层共享相同的匿名部分。

@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

@layer base {
  p { max-width: 70ch; }
}

@layer framework {
  @layer base {
    p { margin-block: 0.75em; }
  }

  @layer theme {
    p { color: #222; }
  }
}

在语法上，显式的层名称由<layer-name>表示， 该名称用于@layer 和 @import 规则中， 它是由<ident>标记组成的以点分隔的列表， 中间没有空格：

<layer-name> = <ident> [ '.' <ident> ]*

CSS 全局关键字保留供将来使用， 如果在 <ident> 中作为 <layer-name> 使用， 则会导致该规则在解析时无效。 当多个标识符使用句点连接时， 这是表示这些层按顺序嵌套的简写形式。

@layer framework {
  @layer default {
     p { margin-block: 0.75em; }
  }

  @layer theme {
    p { color: #222; }
  }
}

@layer framework.theme {
  /* 这些样式将添加到 framework 层中的 theme 层中 */
  blockquote { color: rebeccapurple; }
}

注意：嵌套层不能“逃逸”其父层来引用其外部的层。

6.4.2.1. 匿名层

当 @layer 规则省略其<layer-name>， 或者 @import 规则使用 layer 关键字（没有提供 <layer-name>）， 其层名称获得唯一的匿名段； 因此它不能从外部引用。

/* bootstrap-base.css */
/* 未命名的包装层包围每个子文件 */
@import url(base-forms.css) layer;
@import url(base-links.css) layer;
@import url(base-headings.css) layer;

/* bootstrap.css */
/* 内部名称被隐藏无法访问，包含在“base”中 */
@import url(bootstrap-base.css) layer(base);

/* author.css */
/* 作者可以访问 bootstrap.base 层，但无法进入未命名的层 */
@import url(bootstrap.css) layer(bootstrap);

/* 向 bootstrap 层添加额外的样式： */
@layer bootstrap {...}

6.4.3. 层顺序

层叠层按照首次声明的顺序进行排序， 嵌套的层在其父层内分组， 排在未分层规则之前。

/* 未分层样式在层顺序中排在最后 */
h1 { color: darkslateblue; }

@layer reset.type {
  strong { font-weight: bold; }
}

@layer framework {
  .title { font-weight: 100; }

  @layer theme {
    h1, h2 { color: maroon; }
  }
}

@layer reset {
  [hidden] { display: none; }
}

在条件组规则内定义的层不会影响层顺序， 除非条件为真 或除非条件组规则在文档中针对不同元素可以有不同的评估结果。

注意：由于层顺序在全局范围内适用， 在元素敏感的条件组规则内定义的任何层在建立全局层顺序时需要被考虑， 无论规则的条件如何。 然而，文档全局的条件 （如 @media 和 @supports） 可以根据条件处理这样的@layer规则。

@media (min-width: 30em) {
  @layer layout {
    .title { font-size: x-large; }
  }
}

@media (prefers-color-scheme: dark) {
  @layer theme {
    .title { color: white; }
  }
}

@layer theme, layout;

注意：层叠层限定于其来源和上下文， 因此光 DOM 中层的顺序不会对 阴影 DOM 中同名层的顺序产生影响 （反之亦然）。

允许作者在层顺序中显式放置未分层样式 [Issue #6323]

6.4.4. 内联声明层：@layer规则

@layer规则 声明了一个层叠层， 并可以选择分配样式规则。

6.4.4.1. 内联分配样式：@layer块规则

@layer 块规则将其子样式规则分配给特定的命名层叠层。 这种块层分配语法为：

@layer <layer-name>? {
  <stylesheet>
}

这样的@layer块规则与条件为真的条件组规则[CSS-CONDITIONAL-3]具有相同的限制和处理。

@layer framework {
  h1, h2 { color: maroon; background: white;}

  @media (prefers-color-scheme: dark) {
    h1, h2 { color: red; background: black; }
  }
}

注意：@layer块规则 不能与@import规则交错使用。

6.4.4.2. 无样式声明：@layer声明规则

@layer 规则也可以通过仅提供层名称来定义新的层， 而不分配任何样式规则：

@layer <layer-name>#;

这样的空 @layer 规则允许出现在 @import 和 @namespace 规则之前 （如果存在 @charset 规则，则在其之后）， 也允许出现在任何允许 @layer 块 at-rule 的位置。

注： 在 @import 和 @namespace 规则之间不允许有任何 @layer 规则。 任何出现在 @import 或 @namespace 规则之后的 @layer 规则 都会导致其后的任何 @import 或 @namespace 规则被忽略。

与块语法不同， 此语法中可以提供多个以逗号分隔的层名称， 并按照指定的顺序声明每个层。

注： 由于层的顺序由层名称的首次出现来定义 （参见§ 6.4.3 层的顺序）， 此规则允许页面预先声明其层的顺序， 从而无需读取整个样式表即可看出它们的顺序。 它还允许内联层与导入层交错排列， 这是块语法无法做到的。

@layer default, theme, components;
@import url(theme.css) layer(theme);

@layer default {
  audio[controls] {
    display: block;
  }
}

@layer default;
@import url(theme.css) layer(theme);
@layer components;

@layer default {
  audio[controls] {
    display: block;
  }
}

@import url(default.css) layer(default);
@layer theme;
@import url(components.css) layer(components);

@layer theme {
  audio[controls] {
    display: block;
  }
}

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

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

文档语言可以定义这种呈现提示是否作为级联的 UA来源或 作者来源进入； 如果是，则UA必须相应地执行。 例如，[SVG11]将其呈现属性映射到 作者来源中。

注意：作为级联的UA来源规则的呈现提示 可以被作者来源或用户来源的样式覆盖。 作为作者呈现提示来源规则的呈现提示 可以被作者来源的样式覆盖， 但不能被非important的 用户来源样式覆盖。 主机语言在选择呈现提示的适当来源时应考虑这些因素。

7. 默认值

当级联未产生值时， 必须通过其他方式找到指定值。 继承属性通过 继承从其父元素中获得默认值； 所有其他属性都采用其初始值。 作者可以通过使用inherit和initial关键字显式请求继承或初始化。

7.1. 初始值

每个属性都有一个初始值， 在属性的定义表中定义。 如果该属性不是继承属性， 并且级联未产生值， 则该属性的指定值 是其初始值。

7.2. 继承

继承将属性值从父元素传播到其子元素。 元素上某属性的继承值 是该元素父元素上该属性的计算值。 对于根元素， 它没有父元素， 其继承值是该属性的 初始值。

对于带有影子树的 [DOM] 树， 继承作用于扁平化元素树。这意味着被分配到插槽的元素 从它们被分配到的 slot 继承， 而不是直接从其浅 树父元素继承。伪元素按照为每个伪元素描述的虚构标签序列 进行继承。[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，此来源包括动画来源。

7.3.5. 回滚级联层：revert-layer 关键字

如果某属性的层叠值是 revert-layer 关键字， 则层叠值会回退到下方的层， 从而使指定 值的计算 就如同对于此元素上的此属性，当前层叠层中没有指定任何规则一样——或者在层叠中其 普通和重要级别之间没有指定任何规则一样——。 但是，对于重要附加到元素的样式中的 revert-layer， 它只会回退附加到元素的样式以及介于其间的动画 来源， 而不会回退任何介于其间的作者来源重要 规则。

注： 如果在与 revert-layer 值相同的层叠来源中 没有优先级更低的声明， 则层叠值将 回退到前一个来源。

注： 为此，动画来源不会像 revert 那样与作者 来源合并， 因此实际上形成其自身的层叠层。

8. 层 API

8.1. 扩展CSSImportRule接口

CSSImportRule接口扩展如下：

partial interface CSSImportRule {
  readonly attribute CSSOMString? layerName;
};

其layerName属性表示在at规则中声明的层名称， 如果该层是匿名的，则为空字符串，如果at规则未声明层，则为null。

8.2. CSSLayerBlockRule接口

CSSLayerBlockRule接口表示 @layer块规则：

[Exposed=Window]
interface CSSLayerBlockRule : CSSGroupingRule {
  readonly attribute CSSOMString name;
};

其name属性表示 由at规则本身声明的层名称， 如果该层是匿名的，则为空字符串。

@layer outer {
  @layer foo.bar { }
}

8.3. CSSLayerStatementRule接口

CSSLayerStatementRule接口表示 @layer声明：

[Exposed=Window]
interface CSSLayerStatementRule : CSSRule {
  readonly attribute FrozenArray<CSSOMString> nameList;
};

其nameList属性表示 由at规则声明的层名称列表， 按照与CSSLayerBlockRule的 name 属性相同的规则进行规范化。

9. 变更

9.1. 自 2021 年 10 月 15 日工作草案以来的变更

自 2021 年 10 月 15 日工作草案以来的非平凡变更：

• 更新了 @import 媒体查询和支持条件的语法样式

• 允许函数符号解析时的别名（问题 6193）

• 使 CSSImportRule.layerName 可为空（问题 6576）

• 澄清了 style 属性中的 revert-layer 不会还原作者层（问题 6743）

• 澄清了 style 属性和关键帧中的 revert-layer 行为（问题 6743）

• 添加了 § 4.1.1 值别名 部分。（问题 6193）

• 添加了 § 8 层 API 部分。（问题 6576）

• 澄清了在 style 属性或 @keyframes at 规则中使用 revert-layer 关键字的行为。（问题 6743）

• 澄清了 layer 关键字和 layer() 函数在 @import 规则中的行为。（问题 6776）

9.2. 自 2021 年 8 月 29 日工作草案以来的变更

自 2021 年 8 月 29 日工作草案以来的变更包括：

• 还原未分层样式的顺序。（见 § 9.3 自 2021 年 6 月 8 日工作草案以来的变更 和 问题 6284）

• 定义展示提示使用作者展示提示来源而不是层，匹配对[CSS-CASCADE-4]的更新。（问题 6659）

9.3. 自 2021 年 6 月 8 日工作草案以来的变更

自 2021 年 6 月 8 日工作草案以来的显著变更包括：

• 为将来在层名称中使用 CSS-wide 关键字保留其使用权。（问题 6323）

• 澄清了 @layer 规则遵循全局条件规则，但在声明于非全局条件（如容器查询）时，始终适用于层顺序。（问题 6407）

• 名称定义的 at 规则遵循层顺序以解决冲突，类似于特异性解决。（问题 6404）

• 不允许在 @layer 与 @import 或 @namespace 规则之间交错。（问题 6522）

9.4. 自 2021 年 3 月 19 日工作草案以来的变更

自 2021 年 3 月 19 日工作草案以来的显著变更包括：

• 将未分层样式的顺序从正常来源中的最高优先级切换为最低优先级。（问题 6284）

9.5. 自 2021 年 1 月 19 日工作草案以来的变更

自 2021 年 1 月 19 日首次公开工作草案以来的显著变更包括：

• 将层 导入语法从使用 @layer 改为使用 @import。 （议题 5681）

• 添加了 revert-layer 关键字。 （议题 5793）

9.6. 自第 4 级以来的新增内容

自 第 4 级以来，添加了以下功能：

• 将层叠层 添加到层叠排序条件中 （并将样式属性定义为层叠 排序条件中的一个独立步骤， 以便它们能够适当地交互）。

• 引入了 @layer 规则，用于定义层叠层。

• 向 @import 定义添加了 layer/layer() 选项。

• 引入了 revert-layer 关键字，用于将值回退到 之前的层。

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

自 第 3 级以来，添加了以下功能：

• 引入了用于回滚层叠的 revert 关键字。

• 为支持条件 @import 规则引入了 supports() 语法。

• 将 封装上下文 添加到 层叠 排序条件，以适应 Shadow DOM。[DOM]

• 定义了 CSS 用于支持遗留语法的两个属性别名机制。请参阅 § 3.1 属性别名。

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

自 第 2 级以来，添加了以下功能：

• all 简写属性
• initial 关键字
• unset 关键字
• 将动画和过渡引入到 层叠 中。

致谢

David Baron、Tantek Çelik、Florian Rivoal、Simon Sapin、Jen Simmons 和 Boris Zbarsky 为本规范作出了贡献。

隐私和安全考量

• 层叠过程不区分同源和跨源样式表，使得可以通过它们应用于文档的计算样式来推断跨源样式表的内容。

• 通过应用样式规则表达的用户偏好和 UA 默认值，会被层叠过程暴露出来，并且可以通过它们应用于文档的计算样式来推断。

• @import 规则在加载跨源样式表时不应用 CORS 协议，而是允许它们自由导入并应用。

• @import 规则假定没有 Content-Type 元数据 的资源（或如果主机文档处于怪异模式中的任何同源文件）为 text/css，可能允许任意文件被导入页面并解释为 CSS，从而可能通过它们应用于文档的计算样式推断出敏感数据。