CSS 嵌套模块

1. 简介

本节不是规范性的。

此模块描述了在一个样式规则中嵌套另一个样式规则的支持，允许内部规则的选择器引用由外部规则匹配的元素。此功能允许将相关样式聚合到 CSS 文档中的单一结构中，提高可读性和可维护性。

1.1. 模块交互

此模块引入了扩展 [CSS21] 解析器模型的新解析规则。此模块引入了扩展 [SELECTORS4] 模块的选择器。

1.2. 值

本规范未定义任何新属性或值。

1.3. 动机

即使是中等复杂的网页 CSS 通常也包含大量重复的内容，用于为相关内容进行样式设置。例如，以下是 [CSS-COLOR-3] 模块的一部分 CSS 标记：

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

嵌套允许将相关的样式规则分组，如下所示：

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

除了消除重复，相关规则的分组还提高了生成的 CSS 的可读性和可维护性。

2. 嵌套样式规则

样式规则可以嵌套在其他样式规则中。这些嵌套样式规则的作用与普通样式规则相同——通过选择器将属性与元素关联——但它们“继承”其父规则的选择器上下文，允许它们在不重复父选择器的情况下进一步扩展父选择器，可能会多次使用。

嵌套样式规则与普通样式规则完全相同，唯一的例外是其选择器不能以标识符或功能符号开头。此外，嵌套样式规则可以使用相对选择器。

例如，嵌套样式规则如下：

.foo {
  color: red;

  .bar {
    color: blue;
  }
}

是有效的，并且等同于：

.foo {
  color: red;
}
.foo .bar {
  color: blue;
}

嵌套规则还可以使用嵌套选择器直接引用父规则匹配的元素，或使用相对选择器语法指定除“后代”之外的关系。

.foo {
  color: red;

  &:hover {
    color: blue;
  }
}

/* 等效于： */

.foo { color: red; }
.foo:hover { color: blue; }

.foo {
  color: red;

  + .bar {
    color: blue;
  }
}

/* 等效于： */

.foo { color: red; }
.foo + .bar { color: blue; }

然而，以标识符（换句话说，是类型选择器）开头的嵌套选择器是无效的：

div {
  color: red;

  input {
    margin: 1em;
  }
} 
/* 无效，因为 "input" 是一个标识符。 */

此类选择器仍然可以编写，只需要稍作修改：

div {
  color: red;

  & input { margin: 1em; }
  /* 有效，不再以标识符开头 */

  :is(input) { margin: 1em; }
  /* 有效，以冒号开头，
     与前面的规则等效。 */
}

为什么嵌套规则选择器有一些限制？

简单地将样式规则嵌套在其他样式规则中是不明确的——选择器的语法与声明的语法重叠，因此实现需要无限回溯来判断给定的文本是声明还是样式规则的开头。

例如，如果解析器首先看到 color:hover ...，它无法判断这是否是color 属性（被设置为无效值...）或是 <color> 元素的选择器。它甚至无法依赖查找有效属性来判断它们之间的区别；这会导致解析依赖于实现支持的属性，并可能随时间变化。

禁止嵌套样式规则以标识符开头解决了这个问题——所有声明都以标识符开头，提供属性名称，因此解析器可以立即判断它是在解析声明还是样式规则。

某些非浏览器实现的嵌套规则并不强制此要求。在大多数情况下，最终可以区分属性和选择器，但这样做需要解析器具有无限的回溯能力；也就是说，解析器可能需要保留未知数量的内容，然后才能判断应该如何解释它。迄今为止，CSS 只需要少量、已知的回溯能力，这使得更高效的解析算法成为可能，因此无限回溯在浏览器实现中通常被认为是不可接受的。

2.1. 语法

样式规则的内容现在接受嵌套样式规则和at 规则，以及现有的声明。

嵌套样式规则与非嵌套规则的不同之处在于：

嵌套样式规则的选择器不能以标识符或功能符号开头。
嵌套样式规则接受<相对选择器列表>作为前置选择器（而不仅仅是<选择器列表>）。任何相对选择器都是相对于嵌套选择器表示的元素的。
如果<相对选择器列表>中的选择器没有以组合器开头，但包含嵌套选择器，则它被解释为非相对选择器。

嵌套样式规则的解析的具体细节定义在[CSS-SYNTAX-3]中。

CSS 工作组目前正在探索解析前瞻的后果，并可能因此调整允许的语法。[Issue #7961]

无效的嵌套样式规则将被忽略及其内容被忽略，但不会使其父规则无效。

例如，以下嵌套是有效的：

/* & 可以单独使用 */
.foo {
  color: blue;
  & > .bar { color: red; }
  > .baz { color: green; }
}
/* 等同于
  .foo { color: blue; }
  .foo > .bar { color: red; }
  .foo > .baz { color: green; }
*/


/* 或在组合选择器中使用，
   细化父选择器 */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* 等同于
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* 列表中的多个选择器都相对于父级 */
.foo, .bar {
  color: blue;
  + .baz, &.qux { color: red; }
}
/* 等同于
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & 可以在单个选择器中使用多次 */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* 等同于
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* & 不必在选择器的开头 */

.foo {
  color: red;
  .parent & {
    color: blue;
  }
}
/* 等同于
  .foo { color: red; }
  .parent .foo { color: blue; }
*/

.foo {
  color: red;
  :not(&) {
    color: blue;
  }
}
/* 等同于
  .foo { color: red; }
  :not(.foo) { color: blue; }
*/

/* 但如果你使用相对选择器，
  则会自动隐式包含初始 & */

.foo {
  color: red;
  + .bar + & { color: blue; }
}

/* 等同于
  .foo { color: red; }
  .foo + .bar + .foo { color: blue; }
*/

/* 有点多余，但 & 也可以单独使用 */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* 等同于
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // 或

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* 再次，有点多余，但可以叠加使用 &。 */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* 等同于
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* 父选择器可以任意复杂 */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* 等同于
  :is(.error, #404):hover > .baz { color: red; }
*/

.ancestor .el {
  .other-ancestor & { color: red; }
}
/* 等同于
  .other-ancestor :is(.ancestor .el) { color: red; }

/* 嵌套选择器也可以非常复杂 */
.foo {
  & :is(.bar, &.baz) { color: red; }
}
/* 等同于
  .foo :is(.bar, .foo.baz) { color: red; }
*/

/* 多层嵌套会“累加”选择器 */
figure {
  margin: 0;

  > figcaption {
    background: hsl(0 0% 0% / 50%);

    > p {
      font-size: .9rem;
    }
  }
}
/* 等同于
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

/* 层叠层的示例用法 */
@layer base {
  html {
    block-size: 100%;

    & body {
      min-block-size: 100%;
    }
  }
}
/* 等同于
  @layer base {
    html { block-size: 100%; }
    html body { min-block-size: 100%; }
  }
*/

/* 层叠层的嵌套示例 */
@layer base {
  html {
    block-size: 100%;

    @layer support {
      & body { min-block-size: 100%; 
      } 
    } 
  } 
} 
/* 等同于
  @layer base { 
    html { block-size: 100%; } 
  } 
  @layer base.support { 
    html body { min-block-size: 100%; } 
  } 
*/ 
		
/* Scoping 的示例用法 */
@scope (.card) to (> header) { 
  :scope { 
    inline-size: 40ch; 
    aspect-ratio: 3/4; 
				
    > header { 
      border-block-end: 1px solid white; 
    } 
  } 
} 
/* 等同于
  @scope (.card) to (> header) { 
    :scope { inline-size: 40ch; aspect-ratio: 3/4; } 
    :scope > header { border-block-end: 1px solid white; } 
  } 
*/ 
		
/* Scoping 的嵌套示例 */ 
.card { 
  inline-size: 40ch; 
  aspect-ratio: 3/4; 

  @scope (&) to (> header > *) { 
    :scope > header { 
      border-block-end: 1px solid white; 
    } 
  } 
} 

/* 等同于
  .card { inline-size: 40ch; aspect-ratio: 3/4; } 
  @scope (.card) to (> header > *) { 
    :scope > header { border-block-end: 1px solid white; } 
  } 
*/

但以下情况无效：

/* 选择器以标识符开头 */ 
.foo { 
  color: blue; 
  div { 
    color: red; 
  } 
}

某些生成 CSS 的工具在预处理嵌套时会将选择器作为字符串连接，允许作者在嵌套级别中构建一个单一的简单选择器。这有时与层级命名模式一起使用，如BEM，以减少文件中的重复，当选择器本身具有显著的内部重复时。

例如，如果一个组件使用类 .foo，而嵌套组件使用 .fooBar，你可以在Sass中写成：

.foo { 
        color: blue; 
        &Bar { color: red; } 
} 
/* 在 Sass 中，这等同于 */ 
   .foo { color: blue; } 
   .fooBar { color: red; } 
*/

不幸的是，这种基于字符串的解释与尝试在嵌套规则中添加类型选择器的作者相冲突。例如，Bar是 HTML 中的一个有效自定义元素名称。

CSS 不会这样做：嵌套的选择器组件是原子解释的，而不是字符串连接的：

.foo { 
        color: blue; 
        &Bar { color: red; } 
} 
/* 在 CSS 中，这等同于 */ 
   .foo { color: blue; } 
   Bar.foo { color: red; } 
*/

2.2. 嵌套其他 At 规则

除了嵌套样式规则，本规范还允许在样式规则中嵌套嵌套组规则：任何其主体包含样式规则的 at 规则都可以嵌套在样式规则中。

以这种方式嵌套时，嵌套组规则的内容会被解析为<样式块>而不是<样式表>：

样式规则是嵌套样式规则，它们的嵌套选择器的定义来自最近的父样式规则。
属性可以直接使用，就像它们嵌套在& {...}块中一样。

具体来说，以下规则可以作为嵌套组规则：

这些嵌套组规则的含义和行为与非嵌套时相同，除非另有规定。

例如，以下条件嵌套是有效的：

/* 属性可以直接使用 */
.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
} 
/* 等同于 */
  .foo {
    display: grid;
				
    @media (orientation: landscape) {
      & {
        grid-auto-flow: column;
      }
    }
  }
*/

/* 最终等同于 */
  .foo { display: grid; }

  @media (orientation: landscape) {
    .foo {
      grid-auto-flow: column;
    }
  }
*/

/* 条件可以进一步嵌套 */
.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;

    @media (min-width > 1024px) {
      max-inline-size: 1024px; 
    } 
  } 
} 

/* 等同于 */ 
  .foo { display: grid; } 

  @media (orientation: landscape) { 
    .foo { 
      grid-auto-flow: column; 
    } 
  } 

  @media (orientation: landscape) and (min-width > 1024px) { 
    .foo { 
      max-inline-size: 1024px; 
    } 
  } 
*/ 

/* 层叠层嵌套示例 */ 
html { 
  @layer base { 
    block-size: 100%; 

    @layer support { 
      & body { 
        min-block-size: 100%; 
      } 
    } 
  } 
} 
/* 等同于 */ 
  @layer base { 
    html { block-size: 100%; } 
  } 
  @layer base.support { 
    html body { min-block-size: 100%; } 
  } 
*/ 

/* Scoping 嵌套示例 */ 
.card { 
  inline-size: 40ch; 
  aspect-ratio: 3/4; 

  @scope (&) { 
    :scope { 
      border: 1px solid white; 
    } 
  } 
} 

/* 等同于 */ 
  .card { inline-size: 40ch; aspect-ratio: 3/4; } 
  @scope (.card) { 
    :scope { border-block-end: 1px solid white; } 
  } 
*/

所有直接嵌套的属性都被视为仿佛它们是一起收集的，并按顺序嵌套在一个具有选择器&的嵌套样式规则中，并放在所有其他子规则之前。这在 OM 中也是如此。（也就是说， childRules属性实际上是从这个嵌套样式规则开始的，它包含所有直接嵌套的属性。）

例如，前面的例子：

.foo { 
  display: grid; 

  @media (orientation: landscape) { 
    grid-auto-flow: column; 
  } 
} 
/* 等同于 */ 
  .foo { 
    display: grid; 

    @media (orientation: landscape) { 
      & { 
        grid-auto-flow: column; 
      } 
    } 
  } 
*/

实际上是完全等价的，产生了完全相同的 CSSOM 结构。 CSSMediaRule 对象的CSSStyleRule 对象将在其.childRules属性中包含一个对象，其中包含grid-auto-flow属性。

注意：这确实意味着此类规则的序列化将与原始编写方式不同，序列化时没有直接嵌套的属性。

2.2.1. 嵌套 @scope 规则

当@scope规则是嵌套组规则时， & 在<scope-start>选择器中指代由最近的父样式规则匹配的元素。

在其主体中的样式规则以及它自己的<scope-end>选择器的目的上， @scope规则被视为父样式规则，匹配由其<scope-start>选择器匹配的元素。

即，以下代码：

.parent {
  color: blue;

  @scope (& > .scope) to (& .limit) {
    & .content {
      color: red;
    }
  }
}

等同于：

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

2.3. 混合嵌套规则与声明

当样式规则同时包含声明和嵌套样式规则或嵌套条件组规则时，这三者可以任意混合。然而，声明和其他规则的相对顺序不会以任何方式保留。

例如，在以下代码中：

article {
  color: green;
  & { color: blue; }
  color: red; 
}

/* 等同于 */ 
article { 
  color: green; 
  color: red; 
  & { color: blue; } 
}

为了确定外观顺序，嵌套样式规则和嵌套条件组规则被认为在其父规则之后出现。

例如：

article {
  color: blue; 
  & { color: red; } 
}

两个声明具有相同的特异性（0,0,1），但嵌套规则被认为在其父规则之后出现，因此color: red声明赢得了层叠。

另一方面，在此示例中：

article { 
  color: blue; 
  :where(&) { color: red; } 
}

:where()伪类将嵌套选择器的特异性降低为 0，因此color: red声明的特异性变为（0,0,0），并在“外观顺序”被考虑之前输给了color: blue声明。

注意：虽然可以自由地混合声明和嵌套规则，但这样做的可读性较差且有些混乱，因为所有属性表现得像它们出现在所有规则之前。为了可读性，建议作者在样式规则中先放置所有属性，再放嵌套规则。（这在旧版用户代理中表现稍好一点；由于解析和错误恢复工作的具体细节，出现在嵌套规则之后的属性可能会被跳过。）

注意：与其他类型的规则一样，在存在嵌套的情况下，样式规则的序列化可能与它们最初的编写方式不同。值得注意的是，所有直接嵌套的属性都会在任何嵌套规则之前被序列化，这是另一个将属性写在规则之前的原因。

3. 嵌套选择器：& 选择器

使用嵌套样式规则时，必须能够引用父规则匹配的元素；毕竟，这正是嵌套的全部意义。为了实现这一点，本规范定义了一个新的选择器，即嵌套选择器，书写为& （U+0026 AMPERSAND）。

在嵌套样式规则的选择器中使用时，嵌套选择器表示父规则匹配的元素。在其他任何上下文中使用时，它表示与该上下文中的:scope相同的元素（除非另有定义）。

嵌套选择器可以通过将其替换为父样式规则的选择器来简化，并包裹在:is()选择器中。例如，

a, b { 
  & c { color: blue; } 
}

等同于

:is(a, b) c { color: blue; }

嵌套选择器不能表示伪元素（与:is()伪类的行为相同）。

例如，在以下样式规则中：

.foo, .foo::before, .foo::after { 
  color: red; 

  &:hover { color: blue; } 
}

& 仅代表.foo匹配的元素；换句话说，它相当于：

.foo, .foo::before, .foo::after { 
  color: red; 
} 
.foo:hover { 
  color: blue; 
}

我们希望放宽此限制，但需要同时为:is()和&放宽，因为它们是基于相同的基础机制构建的。（Issue 7433）

特异性对于嵌套选择器等于父样式规则选择器列表中复合选择器的最大特异性（与:is()的行为相同）。

例如，给定以下样式规则：

#a, b { 
  & c { color: blue; } 
} 
.foo c { color: red; }

然后在如下的 DOM 结构中

<b class=foo> 
  <c>蓝色文本</c> 
</b>

文本将是蓝色，而不是红色。 &的特异性是#a的特异性（[1,0,0]）和b的特异性（[0,0,1]）中较大的一个，因此是[1,0,0]，整个& c选择器的特异性为[1,0,1]，这大于.foo c的特异性（[0,1,1]）。

值得注意的是，这与手动展开嵌套为非嵌套规则时得到的结果不同，因为color: blue 声明将因b c选择器（[0,0,2]）而匹配，而不是#a c（[1,0,1]）。

为什么特异性与非嵌套规则不同？

嵌套选择器有意使用与:is()伪类相同的特异性规则，它只使用其参数中的最大特异性，而不是跟踪实际匹配的选择器。

这对于性能来说是必要的；如果一个选择器有多个可能的特异性，取决于它是如何精确匹配的，这会使选择器匹配变得更加复杂和缓慢。

不过，这回避了问题：为什么我们要以&的方式定义:is()？一些非浏览器的类似嵌套功能的实现并没有简化为:is()，主要是因为它们在:is()引入之前。相反，它们直接简化；然而，这带来了自己的重大问题，因为一些（相当常见的）情况会意外地产生巨大的选择器，由于可能性的指数级爆炸。

.a1, .a2, .a3 { 
  .b1, .b3, .b3 { 
    .c1, .c2, .c3 { 
      ...; 
    } 
  } 
} 

/* 直接简化为 */ 
.a1 .b1 .c1, 
.a1 .b1 .c2, 
.a1 .b1 .c3, 
.a1 .b2 .c1, 
.a1 .b2 .c2, 
.a1 .b2 .c3, 
.a1 .b3 .c1, 
.a1 .b3 .c2, 
.a1 .b3 .c3, 
.a2 .b1 .c1, 
.a2 .b1 .c2, 
.a2 .b1 .c3, 
.a2 .b2 .c1, 
.a2 .b2 .c2, 
.a2 .b2 .c3, 
.a2 .b3 .c1, 
.a2 .b3 .c2, 
.a2 .b3 .c3, 
.a3 .b1 .c1, 
.a3 .b1 .c2, 
.a3 .b1 .c3, 
.a3 .b2 .c1, 
.a3 .b2 .c2, 
.a3 .b2 .c3, 
.a3 .b3 .c1, 
.a3 .b3 .c2, 
.a3 .b3 .c3 {...}

在这里，三个级别的嵌套，每个列表中有三个选择器，产生了27个简化后的选择器。向列表中添加更多选择器，增加更多的嵌套层次，或使嵌套规则更复杂可能会使相对较小的规则扩展为多兆字节的选择器（或更多！）。

一些 CSS 工具通过启发式丢弃某些变体来避免这种问题，这样它们就不必输出那么多，但仍然可能是正确的，但这不是用户代理可用的选项。

通过使用:is() 进行简化完全消除了这个问题，代价是使特异性稍微有些没用，这被认为是一个合理的权衡。

嵌套选择器允许出现在复合选择器中的任何位置，甚至可以在类型选择器之前，这违反了复合选择器中的正常排序限制。

例如，&div是一个有效的嵌套选择器，意思是“无论父规则匹配什么，但只有它也是一个 div 元素”。

它也可以写为div&，含义相同，但这不能作为嵌套样式规则的开头（但可以用于选择器中的其他地方）。

4. CSSOM

4.1. 对`CSSStyleRule`的修改

CSS 样式规则现在可以包含嵌套规则：

partial interface CSSStyleRule {
  [SameObject] readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  undefined deleteRule(unsigned long index);
};

cssRules属性必须返回一个 CSSRuleList 对象用于子 CSS 规则。

insertRule(rule, index)方法必须返回调用插入 CSS 规则的结果，将rule插入到子 CSS 规则中的index位置。

deleteRule(index)方法必须从子 CSS 规则中移除index位置的 CSS 规则，移除 CSS 规则。

注意：带有嵌套规则的CSSStyleRule 的序列化已由[CSSOM]很好地定义，通过序列化 CSS 规则。

注意：在嵌套样式规则选择器可以以什么开头的限制在插入 CSS 规则步骤 5 中被视为“CSS 施加的约束” （当调用插入 CSS 规则时适用，不仅仅是CSSStyleRule 本身）。

当设置selectorText时，如果CSSStyleRule 是嵌套样式规则，且返回的选择器组以选择器开头，该选择器以标识符或函数 token 开头，则不执行任何操作并返回。

上述段落将内联到 CSSOM 算法中，而不是被猴子补丁。

符合性

文档约定

符合性要求使用描述性断言和 RFC 2119 术语的组合表达。“必须（MUST）”、“不得（MUST NOT）”、“要求（REQUIRED）”、“应当（SHALL）”、“不应当（SHALL NOT）”、“应该（SHOULD）”、“不应该（SHOULD NOT）”、“建议（RECOMMENDED）”、“可以（MAY）”和“可选（OPTIONAL）”这些关键字在本文件的规范部分应按照 RFC 2119 中的解释进行理解。为了易读性，这些词在本规范中不全部大写。

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

本规范中的示例以“例如”一词引入，或通过 class="example" 与规范文本分开，如下所示：

信息性注释以“注释”一词开头，并通过 class="note" 与规范文本分开，如下所示：

建议部分是规范性部分，以引起特别注意为目的，并通过 <strong class="advisement"> 与其他规范性文本分开，如下所示： UA 必须提供可访问的替代方案。

符合性类别

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

如果渲染器除了按照适当的规范解释样式表外，还能通过正确解析它们并相应地渲染文档来支持本规范定义的所有功能，则该渲染器符合本规范。然而，因设备限制导致 UA 无法正确渲染文档并不会使 UA 不符合规范。（例如，UA 不要求在单色显示器上渲染颜色。）

如果创作工具编写的样式表在语法上符合通用 CSS 语法和本模块中每个功能的单个语法，并且满足本模块中描述的样式表的所有其他符合性要求，则该创作工具符合本规范。

部分实现

为了让作者利用前向兼容的解析规则来分配回退值，CSS 渲染器必须将任何不支持的 at 规则、属性、属性值、关键字和其他语法结构视为无效，并根据需要忽略。特别是，用户代理不得在一个多值属性声明中选择性忽略不支持的值并保留支持的值：如果任何值被视为无效（因为不支持的值必须被视为无效），CSS 要求忽略整个声明。

不稳定和专有功能的实现

非实验性实现

一旦规范达到候选推荐阶段，非实验性实现是可能的，实施者应发布任何 CR 级别功能的未加前缀的实现，只要他们能够证明根据规范正确实现。

为了建立和维护 CSS 在不同实现之间的互操作性，CSS 工作组要求非实验性 CSS 渲染器在发布任何 CSS 功能的未加前缀实现之前，向 W3C 提交实现报告（如果必要，还应提交用于该实现报告的测试用例）。提交给 W3C 的测试用例将由 CSS 工作组进行审核和修正。

CSS 嵌套模块

摘要

本文件状态

1. 简介

1.1. 模块交互

1.2. 值

1.3. 动机

2. 嵌套样式规则

2.1. 语法

2.2. 嵌套其他 At 规则

2.2.1. 嵌套 @scope 规则

2.3. 混合嵌套规则与声明

3. 嵌套选择器：& 选择器

4. CSSOM

4.1. 对`CSSStyleRule`的修改

符合性

文档约定

符合性类别

部分实现

不稳定和专有功能的实现

非实验性实现

索引

本规范定义的术语

引用定义的术语

参考文献

规范性参考文献

参考性参考文献

IDL 索引

问题索引

CSS 嵌套模块

摘要

本文件状态

1. 简介

1.1. 模块交互

1.2. 值

1.3. 动机

2. 嵌套样式规则

2.1. 语法

2.2. 嵌套其他 At 规则

2.2.1. 嵌套 @scope 规则

2.3. 混合嵌套规则与声明

3. 嵌套选择器：& 选择器

4. CSSOM

4.1. 对CSSStyleRule的修改

符合性

文档约定

符合性类别

部分实现

不稳定和专有功能的实现

非实验性实现

索引

本规范定义的术语

引用定义的术语

参考文献

规范性参考文献

参考性参考文献

IDL 索引

问题索引

4.1. 对`CSSStyleRule`的修改