当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 【第九章 CSS 的模块化与作用域】 ✔️
  • 9.1 模块的定义
    • 9.1.1 模块和全局样式
    • 9.1.2 一个简单的 CSS 模块
    • 9.1.3 模块的变体
    • 9.1.4 多元素模块
  • 9.2 将模块组合为更大的结构
    • 9.2.1 模块中多个职责的拆分
    • 9.2.2 模块的命名
  • 9.3 CSS 的作用域 ✔️
    • 9.3.1 CSS 作用域的就近原则 ✔️
    • 9.3.2 划定作用域的边界 ✔️
    • 9.3.3 CSS 中的隐式作用域 ✔️
    • 9.3.4 关于 CSS 作用域与层叠图层 ✔️
  • 9.4 CSS 模式库简介
  • 9.5 本章小结

《CSS in Depth》新版封面

译者注
历时两天，再次怀着敬畏之心完成了本节内容的翻译。CSS 作用域的概念是去年 10 月在 Chrome 浏览器中首次推出的全新功能，至今 Firefox 仍未出台相应的支持方案，网上系统介绍相关知识的文章也寥寥无几，因此本节是第 2 版全新增补的内容。由于篇幅过长，我曾考虑过分上下两篇进行介绍，但是随着翻译与学习的深入，各知识点关联之紧密，又让我数度打消这样的念头。我也渐渐明白了为什么从截稿到最终出版需要如此长的等待了——好内容向来都是精雕细琢的结果，急不得。作者也并没有因为 CSS 作用域刚出炉不久就草草带过。这也是经典之所以为经典的重要原因——该强调的知识点从来不含糊。能人肯下苦功夫，愿共勉之！

9.3 CSS 的作用域 CSS scope

CSS 推出了一个对模块化样式大有帮助的全新功能，叫作 作用域（scope）。虽然 BEM 和其他类似方案也提供了以模块化的方式来组织样式代码的相关约定，但它们都需要不同程度的行为规范来加以约束，并且需要对整个开发团队进行相关培训，确保所有人都能正确理解并统一使用这套方法论。

而 CSS 作用域则从另一个角度给出了解决方案。它通过浏览器强制执行并由层叠规则本身对样式加以控制。通过 @scope 规则定义的 CSS 作用域，不仅可以实现让样式仅对页面指定部分生效，同时还针对模块化 CSS 的构建提供了一些新的功能特性。

注意

CSS 作用域是本书介绍的最新 CSS 功能特性，并于 2023 年 10 月首次在 Chrome 浏览器第 118 版中亮相。尽管它已经在 Web 实验性平台中发布有些时日了（详见第 1 章相关介绍），并在不久后现身 Safari 的技术预览版（tech preview）中，目前仍不清楚 Firefox 浏览器何时跟进该功能，但 CSS 作用域的出现很可能会对后续 CSS 的编写方式产生重大影响，因此，笔者认为有必要将其纳入介绍。

前面已经学过，BEM 和其他类似方案都依赖于精心设计的类名约定，以防止多个模块样式对同一元素生效而相互冲突。CSS 作用域则可以有效控制或避免此类冲突，从而弱化对样式类名称的过分关注。

@scope 规则需要紧跟一个选择器，表示该作用域生效的具体范围，然后用一对大括号将该作用域内的样式包裹起来，如代码清单 9.14 所示。示例选用的是之前介绍过的媒体模块，但已按照 CSS 作用域的语法进行了重写。BEM 风格的类名约定被简化了，在某些情况下甚至可能被完全删除。对照以下样式同步修改本地样式表：

代码清单 9.14 启用作用域后的媒体模块样式代码

@layer modules {
  @scope (.media) { /* 该作用域仅限于 .media 元素内部 */
    :scope { /* 选中 .media 元素本身 */
      display: flex;
      gap: 1.5em;
      padding: 1.5rem;
      background-color: #eee;
      border-radius: 5px;
    }

    :scope.right {
      flex-direction: row-reverse;
    }

    img { /* 选中 .media 内的 img 元素 */
      align-self: start;
    }

    .body { /* 选中 .media 内的 .body 元素 */
      overflow: auto;
      margin-block-start: 0;
    }

    h4 { /* 选中 .media 内的 h4 元素 */
      margin-block-start: 0;
      color: #333;
    }
  }
}

上述示例代码用到了一个特殊的伪类选择器 :scope，用于选中当前作用域的根节点元素，即作用域选择器匹配的元素。本例中即为 .media 元素。注意，.media 选择器只出现在定义作用域时；若要对该元素指定样式，需要在该作用域的规则集代码块中使用 :scope 伪类选择器。

由于其他选择器的作用域都在 .media 元素内，因此它们无需再重复声明 .media 选择器；而作用域代码块中的选择器（如 img 和 .body）也无法选中对应的外围元素。这样就能在页面任意位置复用这些类名和元素标签，并且只对 .media 元素的相关后代元素生效。

更神器的是，@scope 规则中的选择器不会抬升其大括号内的选择器优先级。例如示例中的 img 选择器，优先级看似与 .media img 相仿，但实际优先级仅为 0, 0, 1（而非 0, 1, 1）；同理，.body 选择器的优先级也仅为 0, 1, 0。

有了这样的设计，媒体模块中的 HTML 标记就可以简化为更精简的类名。根据以下示例代码更新 HTML：

代码清单 9.15 简化后的媒体模块 HTML 标记

<div class="media">
  <img src="runner.png" alt="Silhouette of a person running" /><!-- 无需类名 -->
  <div class="body"><!-- 类名由 media__body 简化得来 -->
    <h4>Strength</h4>
    <p>
      Strength training is an important part of
      injury prevention. Focus on your core&mdash;
      especially your abs and glutes.
    </p>
  </div>
</div>

译注

为方便前后对比，再来看看之前 9.1.4 小节给出的媒体模块原始 HTML 版本（即代码清单 9.9）：

<div class="media">
  <img class="media__image" src="runner.png" 
      alt="Silhouette of a person running"><!-- 图片子元素 -->
  <div class="media__body"><!-- 正文子元素 -->
    <h4>Strength</h4>
    <p>
      Strength training is an important part of
      injury prevention. Focus on your core&mdash;
      especially your abs and glutes.
    </p>
  </div>
</div>

查看该示例前，请务必确保 Chrome 浏览器的版本在 118 版及以上（对于版本稍低的 Chrome 浏览器，可以尝试在 chrome://flags/ 特性页面启用 Web 实现性平台相关特性（即 Experimental Web Platform features））。

拥有开发者与 CSS 工作组成员双重身份的 Miriam Suzanne 是 CSS 作用域规范的主要作者。她将 CSS 作用域比作某种意义上的“隶属”关系表达（“belonging”）。标准写法下的选择器 .media .body 选中的是恰巧成为 .media 元素后代的所有 .body 元素（译注：这样一来如果有多个 .media 模块，那么每个模块内的 .body 元素都会被选中）。但是人们需要的往往并非媒体模块中的所有 .body 元素，而是仅与媒体模块存在隶属关系的特定 .body 元素。而 CSS 作用域的出现正是为了进一步明确这样的从属关系。

就本例而言，可能还看不出这样的改造相比之前的版本有何高明之处；只有当遇到页面上嵌套了多个作用域时，这样改造的价值才会凸显出来。此时，CSS 作用域的另两个核心概念就变得至关重要了，即 就近原则（proximity） 和 内部作用域边界（inner scoping limit）。接下来分别进行考察。

9.3.1 CSS 作用域的就近原则 Scope proximity

CSS 作用域的 就近原则（Proximity） 是层叠规范中的一项全新指标。当某个作用域嵌入另一个作用域时，二者所包含的选择器很可能选中相同的元素。当出现这种情况时，按照常规的层叠规则，优先级更高的选择器将会胜出；但如果优先级也相同，则需要根据就近原则，令距离样式声明最近的那个作用域（即内部作用域）中的样式最终胜出。

图 9.7 给出了第一章曾介绍过的层叠规则判定流程图。图中着重强调了 CSS 作用域就近原则的判定节点。这里最为重要的一点，是在解决存在冲突的样式声明时，就近原则是先于源码顺序生效的：

【图 9.7 作用域就近原则的判定是在选择器优先级判定节点后、源码顺序判定节点前生效的】

为了深入理解其工作原理，不妨在页面中添加另一个模块。该模块是一个浅蓝色背景的容器，用于区分页面中不在容器内的其他内容，不妨就叫高亮区块（highlight-block）吧。然后让该区块中任意级别标题（假定为 <h1> 至 <h4>）的文本颜色为蓝色。最后在媒体模块下方的样式表末尾，添加代码清单 9.16 中的样式：

代码清单 9.16 高亮区块（highlight-block）模块的样式代码

@layer modules {
  @scope (.highlight-block) {
    :scope {
      padding: 1rem 1.5rem;
      background-color: #b3cbe6;
    }

    h1,
    h2,
    h3,
    h4 {
      color: #264b73;
    }
  }
}

这里特地让模块样式简单易懂，关键在于演示它与另一个作用域的模块样式存在相互影响。此时如果将媒体模块放入该高亮模块，则会出现如图 9.8 所示的渲染效果。两个模块都存在标题选择器 <h4>，它们同时选中了媒体模块中带 “Strength” 字样的标题元素。由于媒体模块是最内层的作用域，因此媒体模块中的样式声明胜出，最终令标题文字呈深灰色而非蓝色（译注：即 #264b73）。

【图 9.8 作用域存在嵌套时的最终示例样式效果】

在 HTML 中，添加一个带 highlight-block 样式类的 div 元素，并令其包含之前的媒体模块。这样就让高亮区块变为外层作用域，而媒体模块成为了嵌套在高亮模块中的作用域。具体 HTML 标记内容如代码清单 9.17 所示。该代码包含一小段示例文本，旨在阐明 highlight-block 模块原本具备的功能。

代码清单 9.17 包裹媒体模块的高亮区块（highlight block）模块的 HTML 代码

<div class="highlight-block">
  <h4>Running tips</h4>
  <p>
    Here are some tips to stay healthy while training
    and improve your running performance.
  </p>
  <div class="media slot">
    <img src="runner.png" alt="Silhouette of a person running" />
    <div class="body">
      <h4>Strength</h4>
      <p>
        Strength training is an important part of
        injury prevention. Focus on your core&mdash;
        especially your abs and glutes.
      </p>
    </div>
  </div>
</div>

同时，我还在媒体模块中添加了一个 slot 类，以方便后续演示。

模块化 CSS 的底层逻辑是在 CSS 中打造一个基本单元库，以便根据需求进行任意排列组合，最终构建出整个页面。在构建某个模块（比如媒体模块）时，您可能无从知晓该模块后续会被用于哪些场景下；网站开发人员很可能将其放到各种各样的容器中，届时往往更希望其样式优先于它所属模块的样式来渲染。

而在编写 CSS 样式时，您并不一定能预判出样式的优先渲染顺序是怎样的。而 CSS 作用域的就近原则就是确保目标模块样式不受其所在模块干扰的一大利器。有了 CSS 作用域，仅凭 HTML 的实际结构就能对层叠规则进行干预，而最终效果也往往是符合人们预期的。这一点在嵌套了几十个模块的复杂应用中更是如此。

9.3.2 划定作用域的边界 Scoping limit

虽然 CSS 作用域的就近原则（proximity）有助于确定模块间样式的优先级，但前提是明确知道内部作用域的边界在哪儿。相对于依靠就近原则来解决样式冲突，更好地做法其实是彻底杜绝此类冲突。这可以通过划定 CSS 的 作用域边界（scoping limit） 来实现。

要划定 CSS 的作用域边界，需要在 @scope 规则中使用关键字 to，并添加第二个选择器，例如 @scope (.highlight-block) to (.slot)。这里的关键字 to 可以理解为 直到/划定到……为止（until）。这样就能划定一个以 .highlight-block 为上边界、以 .slot 为下边界的作用域有效范围。该写法有时也称为 甜甜圈作用域（donut scoping），因为划定的有效范围在 DOM 结构中呈现出一个空洞，故而得名。

根据代码清单 9.18 中的示例样式更新本地样式表。

代码清单 9.18 划定了 CSS 作用域边界的 @scope 样式示例

@layer modules {
  @scope (.highlight-block) to (.slot) {
    :scope {
      padding: 1rem 1.5rem;
      background-color: #b3cbe6;
    }

    h1,
    h2,
    h3,
    h4 { /* 当前作用域中的这些选择器将不会对 .slot 及其内容生效 */
      color: #264b73;
    }
  }
}

CSS 作用域的就近原则仅在两个作用域间存在样式冲突（即对同一元素的同一样式属性指定了不同样式）时才会触发层叠规则的解析；然而就近原则无法屏蔽外围作用域不存在冲突的其他样式。在前面的示例中（即代码清单 9.16 和 9.17），带 “Strength” 字样的 <h4> 标题根据就近原则，让媒体模块中的样式最终胜出；但是，如果媒体模块没有设置不同的文字颜色，外围作用域指定的蓝色字体还是会生效。

当模块中包含其他模块时，划定作用域边界就显得尤为重要了。这样一来，外围模块无论使用什么样的选择器都不会意外干扰到内部模块。以此前介绍过的下拉模块为例，按照这个思路就可以重构为 @scope (.dropdown) to (.drawer > *)，使得作用域中的样式只对 <div class="drawer"> 元素生效，而它内部的元素则不受丝毫影响。

下拉模块的具体样式如代码清单 9.19 所示。相关 HTML 标记及 JavaScript 脚本的更新就作为练手项目留给各位读者了。同理，也可以对菜单模块做同步修改来启用一个新的作用域。

代码清单 9.19 基于 CSS 作用域重构的下拉模块示例样式代码

@layer modules {
  @scope (.dropdown) to (.drawer > *) {
    :scope {
      display: inline-block;
      position: relative;
    }

    .toggle {
      padding: 0.5em 2em 0.5em 1.5em;
      border: 1px solid #ccc;
      font-size: 1rem;
      background-color: #eee;
    }

    .toggle::after {
      content: "";
      position: absolute;
      right: 1em;
      top: 1em;
      border: 0.3em solid;
      border-color: black transparent transparent;
    }

    .drawer {
      display: none;
      position: absolute;
      left: 0;
      top: 2.1em;
      min-width: 100%;
      background-color: #eee;
    }

    :scope.is-open .toggle::after {
      top: 0.7em;
      border-color: transparent transparent black;
    }
    :scope.is-open .drawer {
      display: block;
    }
  }
}

上述代码中的选择器还可以进一步优化。切换按钮很可能是该作用域中唯一一个 button 元素，因此还可以直接通过标签名称来选中，无需指定类名。

如果您用惯了 BEM，上述选择器的写法可能会让您不太舒服，毕竟类似 BEM 这样的模块化解决方案需要大量使用类名来避免样式冲突（同时也确保了样式优先级的可预见性）；但要是使用得当，借助 CSS 作用域同样可以消除此类隐患。比如可以在几十个模块中随意添加 .title 选择器，然后明确指定各模块样式只对隶属于该模块的标题元素生效。

此外还可以定义一个作用域，使得模块的某些部分在划定边界内，而其余部分则不受边界限制。要实现这样的功能，可以将一个划定了作用域边界的 @scope 规则与另一个不带边界声明的 @scope 规则组合起来，相关示例代码如下：

@scope (.tabs) to (.tabs__pane) {
  button {
    padding: 0.4rem 1.4rem;
    color: #ccc;
    background-color: white;
  }
}

@scope (.tabs) {
  h2 {
    font-size: 1rem;
    font-weight: bold;
    color: #369;
  }
}

上述代码中，第一个 CSS 作用域划定了边界，并对 .tabs 选项卡模块下的 button 按钮元素生效；第二个 CSS 作用域则没有边界限制，将对 .tabs 模块下任意深度的所有二级标题 <h2> 生效。灵活运用这两种写法，就能让模块样式有选择性地对指定内容生效。

注意，CSS 的作用域边界并不会阻断样式的继承。当模块存在嵌套关系时，外层模块的字体样式仍然可以继承给内部嵌套模块。

CSS 作用域 vs 影子 DOM

在定义页面组件时，影子 DOM（Shadow DOM）用于隔离组件与页面外部内容。影子 DOM 偶尔也会作为构建样式作用域的一种解决方案，但我认为该方案仅在特定场景下才有意义。影子 DOM 主要还是一个基于 JavaScript 的功能特性（JavaScript-driven feature），因此不在本书的讲述范围之内；之所以将其与 CSS 作用域进行对比，主要是因为使用过影子 DOM 的人在了解 CSS 作用域相关概念时经常会问到这个问题。

影子 DOM 中的 Web 页面与其余部分是严格隔离开的。从某种意义上讲，这就好比在页面上开了一个洞，不受层叠规则的制约。影子 DOM 须提供自己的样式；从页面外部无法直接对其指定样式。遇到需要将组件迁移到多个网站使用、并且要在所有网站上保持一致的渲染效果，此时影子 DOM 就派上用场了。例如在博客中嵌入某个社交媒体的插件就是影子 DOM 的一个典型应用。具体细节都是在 HTML 和 JavaScript 中定义的，而样式表则无能为力。

另一方面，CSS 作用域将模块整合到层叠规范中，因此更适用于将整个页面视为一体的场景。它既可以让外层样式在某个作用域内生效，同时也可以针对特定区域对于样式的生效与否实现更为精细的把控。本章介绍的模块就是一个很好的例子：它们既可以与页面其他样式一起编写到同一个样式表中，又可以直接依赖某个现成的全局样式或自定义属性。

当所有模块都建立起作用域的概念后，唯一需要注意的命名冲突就是模块根元素上的类名冲突了。这里建议将这些类名作为特例加以区分；其中一种解决方案，是给所有代表模块的类名一个共同的前缀，例如 m-，从而产生唯一的类名，如 m-media 或 m-dropdown；此外，也可以通过设置自定义的 attribute 属性值来避免冲突，例如使用 <div data-scope="dropdown">。对于第二个方案，定义 CSS 作用域时则可以使用 attribute 属性选择器，写作：

@scope ([data-scope="dropdown"]) to ([data-scope])

上述代码划定的内部边界将仅限于带 data-scope 属性（attribute）的内部嵌套元素。若将 <div data-scope="menu"> 放入 <div data-scope="dropdown"> 中，下拉模块将以菜单模块作为其内部边界（inner bound），模块中的样式将无法对菜单模块内部元素生效，而仅对其他模块生效。要是对所有模块都采取此类做法，那么该模块中的样式声明将只对位于模块作用域内、且不在其任意嵌套模块内的其余内容生效。

由于 CSS 作用域是 CSS 推出的一项全新功能，业界还没有成熟的应用模式进行推广。在此鼓励各位多多尝试，看看哪种方式更适合您。

9.3.3 CSS 中的隐式作用域 Implicit scope

CSS 作用域也可以通过 <style> 标签添加到目标作用域的根节点元素内。通过使用不带任何选择器的 @scope 规则，可以为所在父元素隐式地创建一个作用域。例如以下示例代码，对应的 CSS 作用域为 <div class="wrapper">：

代码清单 9.20 隐式创建 CSS 作用域示例代码

<div class="wrapper">
  <style>
    @scope {
      .message {
        padding: 0.8em 1.2em;
        border-radius: 0.2em;
        border: 1px solid #265559;
        color: #265559;
        background-color: #e0f0f2;
      }
    }
  </style>
  <div class="message">Save successful</div>
</div>
<p class="message">This is out of scope.</p>

上述写法对于需要嵌入页面的一次性样式很有帮助。其应用场景可以是一篇博文中的一小段演示内容，或者作为 JavaScript 框架的一部分嵌入页面的某段 HTML 标记。

或许这并非 CSS 作用域的常规用法，因为构建模块往往是为了样式代码的复用；每次在给页面添加某个模块时，您肯定也不愿意反复书写同样的 CSS 样式。只是在某些特殊情况下，这样做可能会更方便。

9.3.4 关于 CSS 作用域与层叠图层 Scope and layers

CSS 选择器优先级的判定仍然早于 CSS 作用域，层叠规则这样设计似乎有点奇怪。毕竟，如果想让内部作用域样式覆盖掉外层作用域，为什么非要先判定一下选择器优先级呢？话虽如此，无论是选择器优先级的判定、还是内层作用域边界的设置，亦或是 CSS 层叠图层概念的引入，这些工具和方法都为我们的样式设计提供了前所未有的灵活性。

如果不希望某个模块中的样式干扰到其内部的子模块，可以考虑划定 CSS 作用域的边界；反之，如果外层模块样式需要渗透进内部模块，则可以通过控制两个模块的选择器优先级来决定最终胜出的样式声明。此外，也不必拘泥于将所有样式都放入同一个层叠图层内。

对于本章演示的所有示例，虽然这些带作用域的 CSS 样式都位于同一个层叠图层，但这只是解决问题的实现方案之一。您也可以将 modules 模块图层拆分为多个子图层，例如在 modules.base 图层中定义模块的形状和布局；在优先级更高的 modules.ui 图层则定义模块的颜色与字体。这样优先级较高的图层样式将始终覆盖低优先级图层样式（基于图层出现的顺序判定，详见第八章）。

这无疑又是一项全新的功能，因此业内在这方面还没有形成特定模式。您可以像理解网格布局中的行与列那样，将层叠图层和 CSS 作用域视为两个相互独立的设计维度，并根据网格中的具体位置设置样式。这样在决定样式间彼此的优先级时就有了更多选择。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局（已完结）
  • 4.1 Flexbox 布局原理
  • 4.2 弹性子元素的大小
  • 4.3 弹性布局的方向
  • 4.4 对齐、间距等细节处
  • 4.5 本章小结
• 第五章 网格布局（已完结）
  • 5.1 构建基础网格
  • 5.2 网格结构剖析 （上）
    • 5.2.1 网格线的编号（下）
    • 5.2.2 网格与 Flexbox 配合（下）
  • 5.3 两种替代语法
    • 5.3.1 命名网格线
    • 5.3.2 命名网格区域
  • 5.4 显式网格与隐式网格（上）
    • 5.4.1 添加变化 （中）
    • 5.4.2 让网格元素填满网格轨道（下）
  • 5.5 子网格（全新增补内容）
  • 5.6 对齐相关的属性
  • 5.7 本章小结
• 第六章 定位与堆叠上下文（已完结）
  • 6.1 固定定位
    • 6.1.1 创建一个固定定位的模态对话框
    • 6.1.2 在模态对话框打开时防止屏幕滚动
    • 6.1.3 控制定位元素的大小
  • 6.2 绝对定位
    • 6.2.1 关闭按钮的绝对定位
    • 6.2.2 伪元素的定位问题
  • 6.3 相对定位
    • 6.3.1 创建下拉菜单（上）
    • 6.3.2 创建 CSS 三角形（下）
  • 6.4 堆叠上下文与 z-index
    • 6.4.1 理解渲染过程与堆叠顺序（上）
    • 6.4.2 用 z-index 控制堆叠顺序（上）
    • 6.4.3 深入理解堆叠上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小结
• 第七章 响应式设计（已完结）
  • 7.1 移动端优先设计原则（上篇）
    • 7.1.1 创建移动端菜单（下篇）
    • 7.1.2 给视口添加 meta 标签（下篇）
  • 7.2 媒体查询（上篇）
    • 7.2.1 深入理解媒体查询的类型（上篇）
    • 7.2.2 页面断点的添加（中篇）
    • 7.2.3 响应式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 响应式图片
  • 7.5 本章小结
• 第八章 层叠图层及其嵌套
  • 8.1 用 layer 图层来操控层叠规则（上篇）
    • 8.1.1 图层的定义（上篇）
    • 8.1.2 图层的顺序与优先级（下篇）
    • 8.1.3 revert-layer 关键字（下篇）
  • 8.2 层叠图层的推荐组织方案
  • 8.3 伪类 :is() 和 :where() 的用法
  • 8.4 CSS 嵌套的使用
    • 8.4.1 嵌套选择器的使用
    • 8.4.2 深入理解嵌套选择器
    • 8.4.3 媒体查询及其他 @规则 的嵌套
  • 8.5 本章小结