CSS 级联与继承 第6级

1. 引言与缺失部分

这是一个关于 CSS 级联与继承 第5级 的差异规范。 它目前是探索性工作草案： 如果你正在实现任何内容，请参考第5级。 一旦本草案达到 CR，我们将合并第5级的文本。

2. 级联

级联 处理给定元素上某属性的一组无序 声明值， 按照下述方式根据 声明 的优先级进行排序， 并输出一个单一的 级联值。

2.1. 层叠排序顺序

层叠将 声明 按照以下条件排序， 优先次序从高到低：

来源和重要性

来源 是指 声明 的 来源位置， 而其 重要性 则取决于 是否使用 !important 声明（见 下文）。 各个 来源 的优先次序从高到低为：

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

此列表中较前的 来源 所对应的声明 优先于后面的 来源 所对应的声明。

上下文

文档语言可以规定如何混合 声明，这些声明 来自不同的 封装上下文， 例如 嵌套的树上下文，它们属于 影子 树，如 [DOM] 中所述。

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

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

样式属性

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

层

每个 声明 在各自的 来源 和 上下文 内均可显式 分配到某个 层叠层。 在此步骤中， 任何未分配到显式层的声明都会被添加到隐式的最后一层。

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

注： 这遵循了用于 确定 普通 和 重要 来源 优先次序的相同逻辑， 因此 !important 标志在这两种 情形下都具有相同的“覆盖”作用。

特异性

选择器模块 [SELECT] 描述了如何 计算选择器的特异性。 每个声明的特异性与其所在样式规则的特异性相同。 特异性最高的声明优先。

作用域邻近度

当比较出现在具有不同 作用域根 的样式规则中的声明时， 则选择在 跨越祖先代际或兄弟元素时， 从 作用域根 到 限定作用域的样式规则 的 主体 所需跳数最少的声明。 为此， 没有 作用域根 的样式规则被视为具有 无限的邻近跳数。

出现顺序

文档顺序中最后一个声明优先。 为此：

• 样式表按照 最终 CSS 样式表 中的顺序排列。
• 来自 导入的样式表 的声明按其样式 表被替换到 @import 规则所在位置的方式排序。
• 来自源文档分别链接的样式表的声明 被视为按照链接顺序串接， 该顺序由宿主文档语言决定。
• 来自样式属性的声明 按照包含该样式属性的元素在文档中的顺序排序， 并且全部排在所有样式表之后。 [CSSSTYLEATTR]

层叠的 输出 是一个（可能为空的）经过排序的 声明 值 列表，分别对应每个元素上的每个属性。

2.2. 层叠来源

CSS 层叠 5 § 6.2 层叠来源

层叠来源

2.3. 重要声明：!important 注释

CSS 层叠 5 § 6.3 重要声明： !important 注释

重要 普通

2.4. 层叠层

CSS 层叠 5 § 6.4 层叠层

2.4.1. 层顺序

CSS 层叠 5 § 6.4.3 层顺序

2.5. 作用域样式：@scope 规则

作用域是文档的一个子树或片段， 可以被选择器用于更有针对性的匹配。 作用域通过以下方式确定：

• 作用域根 节点， 作为作用域的上限，并可选地：

• 作用域限制元素， 作为作用域的下限。

如果一个元素满足以下条件，则该元素为在作用域内：

• 它是作用域根的 树包容后代，且

• 它不是作用域限制的包容后代 作用域限制。

注意：与阴影封装不同， 阴影封装在 DOM 中描述了一个持续的一对一关系， 关系发生在阴影宿主与其嵌套的阴影树之间， 而多个重叠的作用域可以与相同的元素建立关系。

作用域样式在 CSS 中使用@scope 块 at 规则描述， 该规则声明了一个作用域根和一组关联的可选作用域限制以及一组样式规则。

@scope (.light-scheme) {
  /* 仅匹配 light-scheme 内的链接 */
  a { color: darkmagenta; }
}

@scope (.dark-scheme) {
  /* 仅匹配 dark-scheme 内的链接 */
  a { color: plum; }
}

@scope (.media-object) {
  /* 仅匹配 media-object 内的作者图片 */
  .author-image { border-radius: 50%; }
}

@scope (.media-object) to (.content > *) {
  img { border-radius: 50%; }
  .content { padding: 1em; }
}

是否应在 作用域选择器的定义中添加作用域限制？

2.5.1. @scope 的影响

@scope at 规则对其包含的 样式规则有三个主要影响：

• 这些 样式规则 位于 @scope <rule-list> 中时，即为 限定作用域的样式规则。

• 该 :scope 选择器被定义为匹配 该 @scope 规则的 作用域 根， 包括 无特征的 影子 宿主（当该宿主是 作用域根 时）。 & 选择器被定义为表示 代表 作用域根 的选择器（即 <scope-start> 选择器）， 如果未指定选择器，则表示 :scope。

• 层叠会优先考虑具有 更 接近的作用域根的声明， 无论其特异性或出现顺序如何， 都会通过计算作用域邻近度，比较作用域根与相应主体之间的距离，以确定每条有作用域的样式规则的优先级。

注意：与嵌套不同， @scope 规则中的选择器 不会继承 @scope 前言中的父选择器的特异性。

@scope (#hero) {
  img { border-radius: 50%; }
}

:where(#hero) img { border-radius: 50%; }

<section data-scope="main-component">
  <p data-scope="main-component">...<p>

  <!-- sub-component root is in both scopes -->
  <section data-scope="main-component sub-component">
    <!-- children are only in the inner scope -->
    <p data-scope="sub-component">...<p>
  </section>
</section>

p[data-scope~='main-component'] { color: red; }
p[data-scope~='sub-component'] { color: blue; }

/* 两个部分都是外层作用域的一部分 */
section[data-scope~='main-component'] { background: snow; }

/* 内部部分也是内部作用域的一部分 */
section[data-scope~='sub-component'] { color: ghostwhite; }

<section data-scope="main-component">
  <p>...<p>
  <section data-scope="sub-component">
    <p>...<p>
  </section>
</section>

@scope ([data-scope='main-component']) to ([data-scope]) {
  p { color: red; }

  /* 仅外层部分是外层作用域的一部分 */
  section { background: snow; }
}

@scope ([data-scope='sub-component']) to ([data-scope]) {
  p { color: blue; }

  /* 内层部分仅是内部作用域的一部分 */
  section { color: ghostwhite; }
}

@scope ([data-scope='main-component']) to ([data-scope] > *) {
  p { color: red; }

  /* 两个部分都是外层作用域的一部分 */
  section { background: snow; }
}

2.5.2. @scope 的语法

@scope 规则的语法为：

@scope [(<scope-start>)]? [to (<scope-end>)]? {
  <rule-list>
}

其中：

• <scope-start> 是用于识别 <选择器列表> 选择器 用于标识作用域根。

• <scope-end> 是用于识别任何 <选择器列表> 选择器 用于标识任何作用域限制。

• <rule-list> 表示 作用域样式规则。

伪元素不能作为作用域根或 作用域限制； 它们在 <scope-start> 和 <scope-end> 中都是无效的。

2.5.3. 作用域样式规则

作用域样式规则 与非作用域规则在以下方面有所不同：

• 它们的选择器只能匹配在作用域内的元素。 （这仅适用于选择器对象； 选择器的其余部分可以不受限制地匹配。）

• 它们接受<相对选择器列表> 作为前言 （而不仅仅是 <选择器列表>）。 这种相对选择器是相对于:scope。

• 任何位于 <relative-selector-list> 中的选择器，如果不是 以 组合符 开头，但确实 包含嵌套选择器 或 :scope 选择器， 则被解释为非相对选择器（但 主体 仍必须 处于作用域内 才能匹配）。

@scope (#my-component) {
  p { color: green; }
  :scope p { color: green; }
}

@scope (#my-component) {
  > p { color: green; }
  :scope > p { color: green; }
}

@scope (#my-component) {
  :scope { border: thin solid; }
  & { border: thin solid; }

  main :scope p { color: green; }
  main & p { color: green; }
}

2.5.4. 识别作用域根和限制

@scope 规则会根据以下方式生成一个或多个作用域：

找到 作用域根

对于每个由 <scope-start> 匹配的元素， 创建一个 作用域，并以该元素作为 其 作用域根。 如果没有指定 <scope-start>， 那么， 该 作用域根 是 父 元素，即 拥有者节点 的父元素，该节点对应的样式表中定义了 @scope 规则。 （如果不存在这样的元素， 且所在的 节点树 是一棵 影子 树， 那么 作用域根 就是 影子 宿主。 否则， 作用域根 就是 根，即 所在 节点树 的根。） 任何 :scope 或 & 选择器，只要位于 <scope-start> 中，就会 被解释为针对其外部上下文定义的选择器。

找到任何 作用域限制

对于由 作用域根创建的每个 作用域， 其作用域限制设置为 匹配 <scope-end> 且 在作用域内的所有元素， 解释 :scope 和 & 与 作用域样式规则 中完全相同。

<div>
  <style>
    @scope {
      p { color: red; }
    }
  </style>
  <p>this is red</p>
</div>
<p>not red</p>

<div id="foo">
  <style>
    @scope (#foo) {
      p { color: red; }
    }
  </style>
  <p>this is red</p>
</div>
<p>not red</p>

/* .content 仅当它是 :scope 的直接子元素时才是限制 */
@scope (.media-object) to (:scope > .content) { ... }

/* .content 仅当 :scope 位于 .sidebar 内时才是限制 */
@scope (.media-object) to (.sidebar :scope .content) { ... }

2.5.5. 作用域嵌套

@scope 规则可以嵌套。 在这种情况下，就像嵌套样式规则一样， 内部 @scope 的前导选择器（那些定义其 作用域） 由外部选择器限定。

注： 对于进一步嵌套的 作用域，其中的 限定作用域的样式规则 实际上 同时受到 外层和内层 @scope 规则的约束， 但 作用域根 则由 最内层的 @scope 定义。 由于 作用域邻近度 是 通过测量 限定作用域的样式规则 的 主体 与 作用域根 之间的距离来确定的， 因此，只有最内层的 @scope 才会影响 对 作用域邻近度 的确定，就 嵌套的 @scope 规则 而言。

作用域接近度计算是否应受嵌套作用域的影响？ [Issue #10795]

@scope (.parent-scope) {
  @scope (:scope > .child-scope) to (:scope .limit) {
    :scope .content {
      color: red;
    }
  }
}

@scope (.parent-scope > .child-scope) to (.parent-scope > .child-scope .limit) {
  .parent-scope > .child-scope .content {
    color: red;
  }
}

全局名称定义的at 规则， 例如 @keyframes、@font-face 或 @layer，如果定义在 @scope 内是有效的， 但它们不会被封闭的 @scope 规则所作用或影响。 但是，由这些规则包含的任何 样式规则（例如在 @layer 中） 都是作用域样式规则。

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

CSS Cascading 5 § 6.4 级联层

3. CSSOM

3.1. CSSScopeRule 接口

CSSScopeRule 接口表示 @scope 规则：

[Exposed=Window]
interface CSSScopeRule : CSSGroupingRule {
  readonly attribute CSSOMString? start;
  readonly attribute CSSOMString? end;
};

start 类型为 CSSOMString

start 属性返回序列化规则的 <scope-start> 的结果 （不包括外围括号）， 如果没有 <scope-start>，则为 null。

end 类型为 CSSOMString

end 属性返回序列化规则的 <scope-end> 的结果 （不包括外围括号）， 如果没有 <scope-end>，则为 null。

4. 更改

本附录是信息性的。

4.1. 自 2023 年 3 月 21 日工作草案以来的更改

自2023 年 3 月 21 日工作草案以来的重大更改包括：

• :scope 选择器可以匹配 无特征的 shadow host，当该 host 是 作用域根 元素时。 (Issue 9025)

• <scope-start> 和 <scope-end> 选择器是不宽容的。 (Issue 10042)

• 没有 <scope-start> 的 @scope 规则作用于 shadow host，而不是 shadow root。 (Issue 9178)

• 澄清了作用域接近度是单一的测量步骤， 用于测量一个 作用域根和作用域样式规则的 对象之间的步骤。 (Issue 10795 已经打开以进一步讨论此问题)。

• 移除了强作用域接近度。 (Issue 6790)

• 移除了作用域后代组合符（延后处理）。 (Issue 8628)

• 新增了 CSSScopeRule 接口。 (Issue 8626)

4.2. 自 2021 年 12 月 21 日首次公开工作草案以来的更改

自2021 年 12 月 21 日首次公开工作草案以来的重大更改包括：

• 澄清了 @scope 对嵌套的 :scope 和 & 选择器的影响。 (Issue 8377)

• 从特异性计算中移除了 @scope 前导符。 (Issue 8500)

• 指定了名称定义的 at 规则 在 @scope 中的行为。 (Issue 6895)

• 通过使 <scope-start> 可选来添加隐式作用域。 (Issue 6606)

• 在 @scope 前导符中禁止使用 伪元素。 (Issue 7382)

• 移除了选择器作用域符号。 (Issue 7709)

• 作用域限制元素被排除在 结果 作用域之外。 (Issue 6577)

4.3. 自第 5 级以来的新增内容

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

• 定义了作用域，由 <scope-start> 和 <scope-end> 选择器组合描述。

• 用于选择具有下限的 :in() 伪类。

• 用于创建作用域样式表的 @scope 规则。

• 在层叠中定义了作用域接近度。

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

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

• 将 层叠层 添加到 层叠 排序条件中 （并将样式属性定义为 层叠 排序条件中的一个独立步骤， 以确保它们能够正确地相互作用）。

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

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

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

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

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

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

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

• 在 层叠排序标准中添加了 封装上下文 以适应 Shadow DOM。[DOM]

• 定义了 CSS 用于支持旧版语法的两种属性别名机制。参见CSS 层叠 4 § 3.1 属性别名。

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

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

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

致谢

David Baron, Tantek Çelik, Keith Grant, Giuseppe Gurgone, Theresa O’Connor, Florian Rivoal, Noam Rosenthal, Simon Sapin, Jen Simmons, Nicole Sullivan, Lea Verou, 和 Boris Zbarsky 对本规范作出了贡献。

5. 隐私注意事项

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

6. 安全注意事项

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

• @import 规则不对加载跨源样式表应用 CORS 协议， 而是允许自由导入和应用这些样式表。

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