将近20年，CSS终于在所有现代浏览器实现了原生嵌套语法！！！

左手的ㄟ右手 2024-04-22 19:22 51阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">点击在线阅读，体验更好</a></th> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">链接</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代JavaScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">深入浅出Dart</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代TypeScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn/lc" rel="nofollow">linwu的算法笔记?</a></strong></td> 
   <td><a href="https://www.coding-time.cn/lc" rel="nofollow">链接</a></td> 
  </tr> 
 </tbody> 
</table>

![image.png][]

### 引言 ###

> 将近20年，CSS终于在所有现代浏览器实现了原生嵌套语法,是时候淘汰less/sass等预处理器了

![image.png][image.png 1]

[CSS原生嵌套浏览器兼容性查看][CSS]

### 来自 Web 开发者的呼声 ###

2012年4月13日，[CodePen][] 的联合创始人 [Chris Coyier][] 抱怨 CSS 的类名不支持命名空间，导致要写好多重复的选择器。

2016年2月2日，微软的项目经理 [Kenneth Auchenberg][] 说如果 CSS 支持了变量和嵌套，他将不再使用预处理器。

2016年12月8日，[《CSS揭秘》][CSS 1]的作者 [Lea Verou][] 调研了使用 CSS 预处理器的首要原因（单选题），有 1838 个人参与了投票，最终并列第一的两个理由是嵌套和变量。她觉得是时候该重新考虑 CSS 原生嵌套的问题了。

2017年7月13日，集设计和开发才能于一身的 UI/UX 自由工作者 [Sara Soueidan][] 说嵌套是她最想要的 CSS 功能。

2017年8月15日，[node-inspect][] 的作者 [Jan Olaf Krems][] 说 [cssnext][] 把嵌套定义成了“明天的 CSS”，但他还是想看到原生的 CSS 嵌套，毕竟 JS 的生态系统已经证明避免“每个人都使用自己的半标准语言”绝对是健康的。

2018年2月23日，[Lea Verou][Lea Verou 1] 再次发声，说她现在还在用 CSS 预处理器写嵌套，一旦 CSS 支持了原生嵌套，她就果断弃用预处理。

2018年5月25日，[postcss-preset-env][] 的作者 [Jonathan Neal][] 再次提议[重新考虑下让 CSS 支持原生嵌套][CSS 2]（也就是本文章的切入点），这引来了一波热议。

> 在嵌套之前，每个选择器都需要单独声明，相互之间没有联系。这会导致重复、样式表冗余和开发体验分散。

### 示例 ###

嵌套之前的示例：

.nesting {
        
      color: hotpink;
    }
    
    .nesting > .is {
        
      color: rebeccapurple;
    }
    
    .nesting > .is > .awesome {
        
      color: deeppink;
    }

嵌套之后，选择器可以继续编写，并且与之相关的样式规则可以在其中进行分组。

嵌套之后的示例：

.nesting {
        
        color: hotpink;
        
        >.is {
        
            color: rebeccapurple;
    
            >.awesome {
        
                color: deeppink;
            }
        }
    }

[jcode][]

嵌套可以帮助开发人员减少重复选择器的需求，同时还可以将相关元素的样式规则放在一起，提高样式与目标HTML匹配的能力。如果在前面的示例中删除了`.nesting`组件，您可以删除整个嵌套组，而不是在文件中搜索相关的选择器实例。

### 嵌套的作用 ###

**嵌套可以帮助：**

*  组织代码
 *  减小文件大小
 *  进行重构

嵌套从Chrome 112版本开始提供支持，并且在[Safari技术预览版162][Safari_162]中也可以尝试使用。

### 开始使用CSS嵌套 ###

在本文的其余部分，我们将使用以下演示沙箱来帮助您可视化所选择的内容。在默认状态下，没有选择任何内容，所有内容都可见。通过选择不同的形状和大小，您可以练习语法并查看其效果。

![一组小圆、大圆、小三角形、大三角形和正方形的彩色网格。][02a58bb6f1ca3227376808beef5347df.png]

沙箱中有圆、三角形和正方形。其中一些是小的，中等的或大的。其他的是蓝色的、粉色的或紫色的。它们都在`.demo`容器元素内。以下是您将要选择的HTML元素的预览。

#### 嵌套示例 ####

CSS嵌套允许您在一个选择器的上下文中定义另一个选择器的样式。

.parent {
        
      color: blue;
    
      .child {
        
        color: red;
      }
    }

在此示例中，`.child` [类选择器][Link 1]嵌套在`.parent`类选择器内部。这意味着嵌套的`.child`选择器只会应用于具有`.parent`类的元素的子元素。

这个示例也可以使用`&`符号来显式表示父类应该放置在哪里。

.parent {
        
      color: blue;
    
      & .child {
        
        color: red;
      }
    }

这两个示例在功能上是等效的，并且可以通过更多高级示例来进一步理解它们的用法。

##### 选择圆形 #####

对于第一个示例，任务是为演示中的圆形添加淡化和模糊样式。

**不使用嵌套**，CSS现在的写法：

.demo .circle {
        
      opacity: .25;
      filter: blur(25px);
    }

**使用嵌套**，有两种有效的方式：

/* & is explicitly placed in front of .circle */
    .demo {
        
      & .circle {
        
        opacity: .25;
        filter: blur(25px);
      }
    }

或者

/* & + " " space is added for you */
    .demo {
        
      .circle {
        
        opacity: .25;
        filter: blur(25px);
      }
    }

**结果**，所有具有`.circle`类的元素在`.demo`内部被模糊处理，几乎不可见：

![彩色网格中的圆形已经消失，几乎看不到了。][a6af0913af955cf660655df27cbef41f.png]

[jcode][jcode 1]

##### 选择任何三角形和正方形 #####

这个任务需要选择多个嵌套元素，也称为[组选择器][Link 2]。

**不使用嵌套**，现在的CSS有两种方式：

.demo .triangle,
    .demo .square {
        
      opacity: .25;
      filter: blur(25px);
    }

或者，使用[`:is()`][is]

/* grouped with :is() */
    .demo :is(.triangle, .square) {
        
      opacity: .25;
      filter: blur(25px);
    }

**使用嵌套**，有两种有效的方式：

.demo {
        
      & .triangle,
      & .square {
        
        opacity: .25;
        filter: blur(25px);
      }
    }

或者

.demo {
        
      .triangle, .square {
        
        opacity: .25;
        filter: blur(25px);
      }
    }

这两种嵌

套选项在内部都使用了`:is()`。

.demo :is(.triangle, .square) {
        
      opacity: .25;
      filter: blur(25px);
    }

**结果**，`.demo`内部只剩下`.circle`元素：

![彩色网格只剩下圆形，其他形状几乎不可见。][865100299f24c7608fffac5003ee465f.png]

[jcode][jcode 2]

##### 选择大三角形和大圆形 #####

这个任务需要使用[复合选择器][Link 3]，元素必须同时具有两个类才能被选中。

**不使用嵌套**，现在的CSS写法：

.demo .lg.triangle,
    .demo .lg.square {
        
    	opacity: .25;
    	filter: blur(25px);
    }

或者

.demo .lg:is(.triangle, .circle) {
        
      opacity: .25;
      filter: blur(25px);
    }

**使用嵌套**，有两种有效的方式：

.demo {
        
      .lg.triangle,
      .lg.circle {
        
        opacity: .25;
        filter: blur(25px);
      }
    }

或者

.demo {
        
      .lg {
        
        &.triangle,
        &.circle {
        
          opacity: .25;
          filter: blur(25px);
        }
      }
    }

**结果**，所有大三角形和大圆形在`.demo`内部被隐藏：

![彩色网格只显示了小和中等形状。][158dcec1eedf4bb1780c570e53ae2824.png]

[试试演示][Link 4]

###### 使用复合选择器和嵌套的专业提示 ######

`&`符号在这里非常有用，因为它明确显示了如何连接嵌套选择器。考虑以下示例：

.demo {
        
      .lg {
        
        .triange,
        .circle {
        
          opacity: .25;
          filter: blur(25px);
        }
      }
    }

虽然这是一种有效的嵌套方式，但结果可能不符合您的预期。原因是，如果没有`&`来指定期望的`.lg.triangle, .lg.circle`组合，实际结果将是`.lg .triangle, .lg .circle`；[后代选择器][Link 5]。

在没有`&`的情况下嵌套类始终会生成后代选择器。使用`&`符号可以更改结果。

##### 选择除了粉色形状之外的所有形状 #####

这个任务需要使用[否定功能伪类][Link 6]，元素不能具有指定的选择器。

**不使用嵌套**，现在的CSS写法：

.demo :not(.pink) {
          opacity: .25;  filter: blur(25px);}

**使用嵌套**，有两种有效的方式：

.demo :not(.pink) {
        
      opacity: .25;
      filter: blur(25px);
    }

或者

.demo {
        
      :not(.pink) {
        
        opacity: .25;
        filter: blur(25px);
      }
    }

**结果**，所有不是粉色的形状在`.demo`内部被隐藏：

![彩色网格现在是单色的，只显示粉色形状。][e95b83d1ddbe50ff92f489c3cff47b17.png]

[jcode][jcode 3]

###### 使用`&`进行精确控制和灵活性 ######

假设您想要选择`.demo`元素，并使用`:not()`选择器。这时就**需要**使用`&`：

.demo {
        
      &:not() {
        
        ...
      }
    }

这将`.demo`和`:not()`合并为`.demo:not()`，与之前的示例`.demo :not()`不同。这一点非常重要，当您想要嵌套`:hover`交互时，需要特别注意。

.demo {
        
      &:hover {
        
        /* .demo:hover */
      }
    
      :hover {
        
        /* .demo :hover */
      }
    }

#### 更多嵌套示例 ####

[CSS嵌套规范][CSS 3]中包含了更多示例。如果您想通过示例了解更多关于语法的内容，该规范涵盖了各种有效和无效的示例。

接下来的几个示例将简要介绍CSS嵌套的更多特性，帮助您了解其广泛的功能。

##### 嵌套@media #####

> 在样式表中，如果要修改选择器及其样式的媒体查询条件位于不同的地方，这可能会分散注意力。使用嵌套，您可以将媒体查询条件直接嵌套在上下文中。

为了方便起见，如果嵌套的媒体查询仅修改当前选择器上下文的样式，则可以使用最简化的语法。

.card {
        
      font-size: 1rem;
    
      @media (width >= 1024px) {
        
        font-size: 1.25rem;
      }
    }

使用`&`也可以：

.card {
        
      font-size: 1rem;
    
      @media (width >= 1024px) {
        
        &.large {
        
          font-size: 1.25rem;
        }
      }
    }

这个示例展示了使用`&`的扩展语法，同时也针对`.large`

卡片进行了定位，以展示继续工作的其他嵌套特性。

了解更多关于[嵌套@media][media]的内容。

##### 任意嵌套 #####

到目前为止，所有的示例都是在前一个上下文中继续或附加选择器。如果需要，您可以完全更改或重新排列上下文。

.card {
        
      .featured & {
        
        /* .featured .card */
      }
    }

`&`符号表示选择器对象的引用（不是字符串），可以放置在嵌套选择器的任何位置。甚至可以多次放置：

.card {
        
      .featured & & & {
        
        /* .featured .card .card .card */
      }
    }

虽然这个示例看起来有点没有用，但在某些情况下，能够重复选择器上下文是很方便的。

#### 无效的嵌套示例 ####

在嵌套中，有几种语法场景是无效的，如果您之前使用预处理器进行嵌套，可能会对此感到惊讶。关于有效嵌套语法的速查表可以在本文的理解嵌套解析器部分找到。

##### 嵌套元素标签名 #####

HTML元素目前需要在前面加上`&`符号或使用`：is()`进行包装。

.card {
        
      h1 {
        
        /* ? h1 does not start with a symbol */
      }
    }

通过以下语法进行修复：

.card {
        
      & h1 {
        
        /* ✅ now h1 starts with a symbol */
      }
    
      /* or */
    
      :is(h1) {
        
        /* ✅ now h1 starts with a symbol */
      }
    }

##### 嵌套和连接 #####

许多CSS类命名约定依赖于嵌套能够像连接字符串一样连接或附加选择器。但在CSS嵌套中，这种方法是无效的，因为选择器不是字符串，而是对象引用。

.card {
        
      &--header {
        
        /* is not equal to ".card--header" */
      }
    }

更详细的解释可以在[规范][Link 7]中找到。

##### 混合嵌套和声明 #####

考虑以下嵌套的CSS块：

.card {
        
      color: green;
      & {
         color: blue; }
      color: red;
    }

`.card`元素的颜色将是蓝色。

所有混合的样式声明都会被提升到顶部，就好像它们是在嵌套之前编写的一样。更多细节可以在[规范][Link 8]中找到。

### 理解嵌套解析器 ###

要在CSS嵌套中取得最好的效果，我们可以研究解析器在处理嵌套时的工作原理。了解这一点，我们可以自信地嵌套样式，而不必经常查找规则。

首先，最简单的方法是识别触发解析器开始消耗嵌套样式的符号。

& @ : . > ~ + # [ *

这些符号应该看起来很熟悉。其中一些是组合器，一些是选择器。所以最简单的情况是，如果解析器发现您的嵌套选择器，并且它不以这些符号之一开头，它将失败，并错误地消耗您的样式。

!\[& @ : . > ~ + \# [ \*. 嵌套选择器以这些符号之一开头吗？如果是，则有效。如果不是，则无效。][_.]

![image.png][image.png 2]

### 功能检测 ###

> 有两种非常好的方法来检测CSS嵌套：使用嵌套或使用`@supports`检查

使用嵌套：

html {
        
      .has-nesting {
        
        display: block;
      }
    
      .no-nesting {
        
        display: none;
      }
    }

使用`@supports`检查：

@supports not ((nesting: normal)) {
          /* 在这里使用传统的样式 */}

这两种方法都依赖于嵌套的`nesting`功能。在支持的浏览器中，第一个嵌套示例将起作用，而第二个示例将被忽略。在不支持嵌套的浏览器中，情况正好相反。

### 总结 ###

CSS嵌套使开发者能够以更直观和组织良好的方式编写样式规则。它有助于减少代码重复、提高可读性，并提供更好的维护性和重构能力。

使用嵌套时，确保理解如何正确放置选择器和使用`&`符号来连接或附加选择器。此外，熟悉无效的嵌套示例，以避免错误。

在实际使用CSS嵌套时，请记住进行功能检测，并考虑适当的回退或替代方案，以确保在不支持嵌套的浏览器中也能提供一致的体验。

最后，请记住，嵌套应该是有意义的，并且应该提高代码的可读性和可维护性。避免过度使用嵌套，以免引入样式的复杂性和性能问题。使用嵌套时，请遵循一致的命名约定和最佳实践，以确保团队成员可以轻松理解和维护代码。

### 参考 ###

*  https://tabatkins.github.io/specs/css-nesting/
 *  https://developer.chrome.com/articles/css-nesting/\#understanding-the-nesting-parser

[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0edeaa1ee1064553bf6d5d642396c8fc.jpeg
[image.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c41b3a45119b4484b6e787b82f1a11d7.png
[CSS]: https://caniuse.com/?search=css%20nesting
[CodePen]: https://codepen.io/
[Chris Coyier]: https://twitter.com/chriscoyier/status/190902689125765120
[Kenneth Auchenberg]: https://twitter.com/auchenberg/status/694600693470998529
[CSS 1]: https://www.amazon.com/CSS-Secrets-Lea-Verou/dp/1449372635?tag=leaverou-20
[Lea Verou]: https://twitter.com/LeaVerou/status/806936438797307904
[Sara Soueidan]: https://twitter.com/SaraSoueidan/status/885395663424499713
[node-inspect]: https://github.com/nodejs/node-inspect
[Jan Olaf Krems]: https://github.com/w3c/csswg-drafts/issues/998#issuecomment-322299726
[cssnext]: http://cssnext.io/
[Lea Verou 1]: https://twitter.com/LeaVerou/status/967132228349251585
[postcss-preset-env]: https://preset-env.cssdb.org/
[Jonathan Neal]: https://github.com/jonathantneal
[CSS 2]: https://github.com/w3c/csswg-drafts/issues/2701
[jcode]: https://code.juejin.cn/pen/7257557921612398647
[Safari_162]: https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/
[02a58bb6f1ca3227376808beef5347df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/ffe664bb67254970891648c2c0151224.png
[Link 1]: https://web.dev/learn/css/selectors/#class-selector
[a6af0913af955cf660655df27cbef41f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/51146b690af44914afbb5881f0956dc8.png
[jcode 1]: https://code.juejin.cn/pen/7257558669288538167
[Link 2]: https://web.dev/learn/css/selectors/#grouping-selectors
[is]: https://web.dev/learn/css/pseudo-classes/#is
[865100299f24c7608fffac5003ee465f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/4ed6036e7eb54cb4b81230e0ccffff34.png
[jcode 2]: https://code.juejin.cn/pen/7257558908405809189
[Link 3]: https://web.dev/learn/css/selectors/#compound-selectors
[158dcec1eedf4bb1780c570e53ae2824.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e572adecff0545be906d7c3855838520.png
[Link 4]: https://codepen.io/web-dot-dev/pen/WNgZGrz
[Link 5]: https://web.dev/learn/css/selectors/#descendant-combinator
[Link 6]: https://web.dev/learn/css/pseudo-classes/#not
[e95b83d1ddbe50ff92f489c3cff47b17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/cd9bba1c5a854227960fe73e38ac0376.png
[jcode 3]: https://code.juejin.cn/pen/7257559153554489381
[CSS 3]: https://www.w3.org/TR/css-nesting-1/
[media]: https://www.w3.org/TR/css-nesting-1/#conditionals
[Link 7]: https://www.w3.org/TR/css-nesting-1/#conditionals:~:text=Some%20CSS%2Dgenerating%20tools%20that%20preprocess%20nesting%20will%20concatenate%20selectors%20as%20strings%2C
[Link 8]: https://www.w3.org/TR/css-nesting-1/#mixing
[_.]: https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/wgW0MQEoQDmjlZUj5fJ0.png?auto=format
[image.png 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/110d313943af42e8a3d87ea274fea080.png