【CSS in Depth 2 精译_056】8.4 CSS 的新特性——原生嵌套（Nesting）+ 8.5 本章小结

安冬的码畜日常2024-11-03 17:26

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

  • 【第三部分 现代 CSS 代码组织】 ✔️
  • 【第八章 层叠图层及其嵌套】 ✔️
    • 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 本章小结 ✔️

文章目录

  • [8.4 嵌套 Nesting](#8.4 嵌套 Nesting)
    • [8.4.1 嵌套选择器的使用 Using the nesting selector](#8.4.1 嵌套选择器的使用 Using the nesting selector)
    • [8.4.2 深入理解嵌套选择器 Understanding the nuances of the nesting selector](#8.4.2 深入理解嵌套选择器 Understanding the nuances of the nesting selector)
      • [8.4.2.1 嵌套对优先级的影响 Nesting affects specificity](#8.4.2.1 嵌套对优先级的影响 Nesting affects specificity)
      • [8.4.2.2 嵌套对目标元素的影响 Nesting affects which elements are targeted](#8.4.2.2 嵌套对目标元素的影响 Nesting affects which elements are targeted)
    • [8.4.3 媒体查询及其他 @规则 的嵌套 Nesting media queries and other at-rules](#8.4.3 媒体查询及其他 @规则 的嵌套 Nesting media queries and other at-rules)
      • [8.4.3.1 始终先写非嵌套声明 Always place nonnested declarations before nested blocks](#8.4.3.1 始终先写非嵌套声明 Always place nonnested declarations before nested blocks)
    • [8.5 本章小结 Summary](#8.5 本章小结 Summary)

《CSS in Depth》新版封面

译者按

因为临时有事耽搁，有段时间没更新专栏了，今天赶紧补上。原来书中的嵌套（nesting）并非是针对层叠图层（cascade layer）而言的，而是 CSS 新推出的一个语法糖（莫非是迫于 Sass 和 Less 的强大攻势？哈哈），还是等学完这一章再来统一更正前面的说法吧。对一个事物的认识就是这样螺旋上升的。一起学起来！

8.4 嵌套 Nesting

嵌套（Nesting） 是 CSS 的一项功能。它可以将一个样式规则放入另一个样式规则内，从而使子规则的选择器与父规则的选择器相对应，既减少了代码冗余，又可以将相关选择器组合到一起。如果之前用过 Sass 和 Less 等 CSS 预处理工具，就不会对这种写法感到陌生（不过也存在一些细微差别，稍后会详述）。

警告

嵌套是一项全新的功能。截至 2023 年底，嵌套已经在所有的主流浏览器中启用，不过部分用户可能需要过段时间才能安装升级。在决定是否在生产环境中使用嵌套特性前，请参考 https://caniuse.com/css-nesting 了解最新的使用情况统计信息。

下面举例说明嵌套功能的用法。我将为您展示一个同时启用嵌套功能和不启用的对比示例。如代码清单 8.13 所示，该样式代码为传统非嵌套的三个关联规则集。注意，这三个选择器都以相同的样式类 .card 开始。

代码清单 8.13 不带嵌套功能的 CSS 相关选择器

css 复制代码 
.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
}

.card > h3 {
  margin-block: 0;
  border-block-end: 1px solid #eee;
}

.card .card-body {
  padding-block: 1em;
}

而用上嵌套后的代码将更简洁。代码清单 8.14 为上述代码的等效嵌套版。样式类选择器 .card 从第二、第三个选择器中移除，取而代之的，是将它们嵌套进第一个规则集内：

代码清单 8.14 嵌套 CSS 选择器

css 复制代码 
.card { /* 父级选择器 */
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;

  > h3 { /* 选中 .card > h3 */
    margin-block: 0;
    border-block-end: 1px solid #eee;
  }

  .card-body { /* 选中 .card .card-body */
    padding-block: 1em;
  }
}

浏览器会将被嵌套的规则集选择器与外层选择器连接起来，因此其选中元素仍然与未使用嵌套的上一个版本相同。这样做有两个好处。首先，它消除了 .card 在所有三个选择器中的代码冗余，便于后续对该样式类进行修改、且更不容易出错；其次，嵌套的写法明确将相关样式归入同一组大括号内，表明它们都是协同工作的。其中的缩进是可选的，但一般都会保留，旨在强调代码结构。

而选择器的优先级则由最终组合的选择器共同决定，因此父选择器和子选择器的优先级是直接累加的。选择器 .card-body 的优先级加上其父选择器 .card 的优先级，即为 0, 2, 0。换句话说，嵌套写法中的样式与没有嵌套的版本具有相同的优先级。

提示

尽量避免让选择器嵌套过深，以免让选择器的优先级远远超出实际需要。

如果往子规则集添加更多规则集，就能将样式嵌套进更深的层中；不过这样一来，就像书写更长的选择器一样，最终组合选择器的长度也会相应增大，从而导致优先级过高。建议将规则集的嵌套深度控制在三层以内。如果超过三层，可能就需要考虑重新组织一下代码了。下一节将深入探讨这个问题。

8.4.1 嵌套选择器的使用 Using the nesting selector

除了默认的从属关系外，嵌套还可以用于表示其他结构，例如下面这段没有嵌套的样式代码：

css 复制代码 
.modal {
  display: none;
}
.modal.is-open {
  display: block;
}

该样式中，样式类 modal 显然重复了，但如果改为嵌套的写法，其默认行为将与想要的效果大相径庭。具体来说，要是将 .is-open 嵌入 .modal 代码块中，相当于写成了 .modal .is-open，中间隔了一个空格（即后代选择器）；而我们期望的结果应该是 .modal.is-open。

不过，只要在内部选择器上用一个 & 连接符来指代外部选择器，就能轻松解决这个问题。这里的连接符 & 也被称为 嵌套选择器（nesting selector） 。嵌套选择器可以引用外层选择器，并将其合并到当前内层选择器中。再来看下面这个案例，其中内层选择器 &.is-open 等同于 .modal.is-open，两个样式类选择器间没有空格。

代码清单 8.15 利用 & 来构建一个复合选择器

css 复制代码 
.modal {
  display: none;

  &.is-open { /* 将选中 .modal.is-open */
    display: block;
  }
}

若要针对页面元素的多种变体或状态应用不同的样式，嵌套选择器就会非常好用。例如使用 &:hover 作内部选择器，选中悬停状态下的外层元素；或者使用 &::after 来选中外层选择器的伪元素 ::after。

注意

CSS 中的 & 无法像 Sass 那样，通过嵌套选择器拼接出一个新的类名。在 Sass 中，父级为 .card 的内部选择器 &large 会选中一个拼接后的样式类 .cardlarge；而在 CSS 中则会被解析为 large.card，选中一个并不存在的 <large class="card"> 元素。

& 还可以用于调整选择器顺序，写到嵌套选择器的后面，如代码清单 8.16 所示。在这段样式代码中，嵌套选择器 .homepage & 将选中所有满足 .homepage .card 条件的元素，即位于元素 .homepage 内部的所有 .card 元素。

代码清单 8.16 在嵌套的 CSS 样式中使用 & 符号

css 复制代码 
.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  .homepage & { /* 选中 .homepage .card */
    background-color: #ccc;
  }
}

这种写法某种意义上实现了代码的反转（flips the code around）：不必再为外层选择器的子元素设计样式，而是在特定上下文中直接给外层元素设计样式即可。

警告

通常情况下，应当尽量避免在选择器末尾使用 & 来嵌套样式。虽然并没有明令禁止这么写，但根据上下文来设计样式不利于样式代码的长期维护。具体原因留待下一章解释，届时会给出其他变通方案。
嵌套选择器一个废弃的早期写法

在嵌套规范的早期版本中，嵌套选择器必须以 &、. 或者 # 符号开头，并且明令禁止以字母标识符开头（即标签选择器），因此，当时写成下列代码这样都是 无效的：

css 复制代码 
.card {
  h3 { ... }
}

当时之所以加上这一条，是因为浏览器厂商担心嵌套选择器对其语言解析算法的性能有影响，并且在有效鉴别嵌套选择器和普通属性声明的能力方面信心不足。好在后来他们找到了有效的解决方案，该限制也就此作罢，上面的写法才重新成为有效写法。

之所以引出这一段往事，是因为许多早期教程都遵循了这个废弃的限制条件，并且 Chrome 浏览器和 Safari 浏览器的首批实现版本也确实执行了该限制条件。这种情况预计会在本书付梓前后有所改观。在此期间，可以在内部选择器上添加一个 & 来绕开这一废弃的规定（即写作 & h3）。

这些新的配置选项为 CSS 选择器的合理组织提供了更多新思路。具体如何组织是一个复杂的话题。下一章我会就如何以最佳方式组织选择器给出一些实用的建议，顺带提一下应该尽量避开的一些写法。

8.4.2 深入理解嵌套选择器 Understanding the nuances of the nesting selector

嵌套是 CSS 一个特殊的语言特性，因为从技术上讲，它并没有为 CSS 带来语言层面的新功能。这就是所谓的 语法糖（syntactic sugar） ：仅仅提供了一种让样式的书写更"甜美"（"sweeter"）的写法，使其更易于阅读或表达某些想法；而在底层，这样的写法则会被转换（或称 desugars，即去糖化处理）为不带嵌套的传统样式代码。

关键要明确一点：在使用 & 引用父级选择器时，转换或去糖化处理的本质，是将父级选择器封装到 :is() 伪类函数中。这样一来，外层选择器就可以写成包含多个选择器的列表形式，例如：

css 复制代码 
button,
input,
textarea,
select {
  &.invalid {
    border: 1px solid red;
  }
}

浏览器最终会将上述嵌套选择器解析为 :is(button, input, textarea, select).invalid。借助 :is() 来解释嵌套选择器，浏览器可以直接进行相关转换，即使是再复杂的深度嵌套也不例外。

8.4.2.1 嵌套对优先级的影响 Nesting affects specificity

在简单的示例中，嵌套对优先级的影响往往显而易见。之所以强调出来，主要是出于两个原因。一是嵌套写法会直接影响选择器的优先级。由于 :is() 伪类的优先级是由传入参数的最高优先级决定的，嵌套选择器也具有同样的行为特征。如果父级选择器具有较高的优先级，那么任何使用了 & 的选择器也将具有较高的优先级，例如以下示例样式：

css 复制代码 
input,
#login-form button {
  &:focus {
    border-color: var(--brand-color);
  }
}

此时，浏览器会将嵌套选择器解析为 :is(input, #login-form button):focus；即便需要匹配的选择器仅仅是 input:focus 那部分元素（其优先级单看为 0, 1, 1），最终的优先级却始终是 1, 1, 1。

8.4.2.2 嵌套对目标元素的影响 Nesting affects which elements are targeted

使用嵌套写法的第二个影响是，最终匹配的目标元素可能比预想的要多。考虑以下嵌套选择器：

css 复制代码 
.card .title {
  footer & { ... }
}

该嵌套选择器用于匹配 footer 元素内 .card 样式类下的 .title 标题，例如以下 HTML 元素：

html 复制代码 
<footer>
  <div class="card">
    <h3 class="title">Franklin Running Club</h3>
  </div>
</footer>

不过很容易漏掉的一点，是该选择器还可以选中以下 HTML 标记中的 .title 标题：

html 复制代码 
<div class="card">
  <footer>
    <h3 class="title">Franklin Running Club</h3>
  </footer>
</div>

嵌套选择器最终将转换为 footer :is(.card .title)。满足条件的 .title 既可以是 footer 的子项，也可以是 .card 的子项；而 footer 与 .card 之间的从属关系并不明确，因此它们可以按任意顺序进行嵌套，选择器都会匹配成功。

这种细微差别很容易被忽视，而且很可能过了很长时间才会注意到，从而导致页面样式报错。一旦出现这样的情况，就必须意识到嵌套选择器相关的影响。

8.4.3 媒体查询及其他 @规则 的嵌套 Nesting media queries and other at-rules

嵌套的写法还可以应用到媒体查询 @media 中，并且写起来非常方便，可能是因为我喜欢将相关代码组合在一起的缘故。这样一来，页面各个部分的响应式代码就可以放到一块儿了。

代码清单 8.17 就给出了一个示例版本。注意，嵌套媒体查询内部的样式声明不需要任何嵌套选择器；它们直接对父级选择器生效。这样，选择器只要写好一次，相应的响应式样式代码就会自动生效。

代码清单 8.17 嵌套媒体查询的示例样式代码

css 复制代码 
h1 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  
  /* h1 的中型断点样式 */
  @media (min-width: 800px) {
    font-size: 2.6rem;
  }

  /* h1 的大型断点样式 */
  @media (min-width: 1200px) {
    font-size: 3rem;
  }
}

与上述样式等效的非嵌套版本如下：

css 复制代码 
h1 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
}
@media (min-width: 800px) {
  h1 {
    font-size: 2.6rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem;
  }
}

与媒体查询规则类似，也可以对 @layer 及 @supports 等规则启用嵌套写法，如代码清单 8.18 所示。这些规则均对父级选择器 input 生效：

代码清单 8.18 嵌套写法在 @layer 与 @supports 规则中的应用示例

css 复制代码 
input {
  @layer base { /* 嵌套图层写法下的 input 样式规则 */
    font: inherit;
    border: 2px solid #999;
  }

  @layer modules { /* 嵌套图层写法下的 input 样式规则 */
    padding: 5px 10px;

    /* 仅在支持 :user-invalid 伪类的浏览器中生效的 input 样式 */
    @supports selector(:user-invalid) {
      border-color: green;

      &:user-invalid {
        border-color: red;
      }
    }
  }
}

与代码清单 8.17 一样，上述代码演示了不同 @规则 下的样式嵌套写法，但没有声明任何子选择器（child selector）。类似地，这些样式声明也都将对所在的父级选择器生效。

嵌套写法对于另外两个 @规则 ------ @scope 和 @container 同样适用，具体用法将在后续章节详细介绍。

8.4.3.1 始终先写非嵌套声明 Always place nonnested declarations before nested blocks

在本节给出的所有示例中，我都将不带嵌套的样式声明放在了嵌套代码块的开头。强烈建议您也这样做，主要原因有两个。

一是浏览器就是根据这个顺序解析样式的。如果将非嵌套的样式声明放到嵌套代码块的后面，浏览器在实际确定层叠规则的源码顺序时会 逆序执行（reverse the order）。

例如，在代码清单 8.19 中，貌似非嵌套的 2.2rem 字号会覆盖嵌套媒体查询中的字号 2.6rem；然而事实并非如此。当媒体查询条件匹配成功时，在层叠规则中胜出的其实是 2.6rem 字号，感觉就像非嵌套声明（即 2.2rem）原本就写在媒体查询前面一样。

代码清单 8.19 实际位于嵌套代码块前的非嵌套声明示例代码

css 复制代码 
h1 {
  @media (min-width: 800px) {
    font-size: 2.6rem;
  }

  font-size: 2.2rem; /* 浏览器会将该声明移至 @media 代码块上方，从而颠倒源代码顺序 */
}

如果您用过 CSS 预处理工具，就会知道上述代码与预处理工具中的嵌套行为是一致的。

先写非嵌套声明的第二个原因在于，这样做可以让不支持嵌套写法的浏览器先解析这些普通声明。老版本的浏览器在遇到无法解释的嵌套选择器前，可以先解析诸如 h1 { font-size: 2.2rem; 这样的样式声明，并使之生效。这样往往可以更好地实现优雅降级，而不是让页面在老版本浏览器中几乎没有预定样式。

8.5 本章小结 Summary

  • 层叠图层可以对 CSS 优先级进行直接干预。与仅使用选择器优先级和源码顺序相比，层叠图层提供了一种更为合理的解决方案来控制 CSS 样式的优先级。
  • 将如下六个图层作为组织样式表的实用模板：reset 重置图层、theme 主题图层、global 全局图层、layout 布局图层、modules 模块图层以及 utilities 工具图层。实际应用时可根据具体需求作适当调整。
  • :is() 伪类可以从给定的一组选择器中进行挑选，有助于简化重复且冗长的选择器的书写。
  • :where() 伪类的行为模式类似于 :is() 伪类，但其自身优先级始终为零；:where() 伪类适用于要求选择器始终处于低位运行、以免覆盖掉其他样式的场合。
  • CSS 的嵌套写法能够在父级选择器内部放置子级选择器或子级 @规则。

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

第 1 版 第 2 版
读者评分 原版：4.7 （亚马逊）；中文版：9.3（豆瓣） 原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间 原版：2018 年 3 月 ；中文版：2020 年 4 月 原版：2024 年 7 月；中文版：暂无，待出版
原价 原版：$44.99 ；中文版：￥139.00 原版：$59.99；中文版：暂无，待出版
现价 原版：$36.49 ；中文版：￥52.54 起步 原版：$52.09；中文版：暂无，待出版
原版国内预订 起步价 ￥461.00 起步价 ￥750.00

本专栏为该书第 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 本章小结
相关推荐
m0_7482402520 分钟前
前端如何检测用户登录状态是否过期
前端
black^sugar21 分钟前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人1 小时前
前端知识补充—CSS
前端·css
GISer_Jing1 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245521 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v1 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing1 小时前
开源白板新方案：Plait 同时支持 Angular 和 React 啦！
前端·开源·github
2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_857600952 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL2 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）