CSS 嵌套语法（CSS Nesting）

CSS 嵌套（CSS Nesting）是最新的 CSS 正式语法之一。它允许我们在编写样式时，将子选择器直接嵌套在父选择器内部，更直观地表达层级关系，减少重复书写父选择器，从而提升开发效率和样式可维护性。

虽然主流浏览器已经支持 CSS 嵌套语法，但为了兼容旧版浏览器，建议在项目中配合 PostCSS 插件（如 postcss-preset-env）使用 。这样可以在构建阶段自动将嵌套 CSS 转换为普通平铺 CSS，确保样式兼容所有环境。具体浏览器支持情况可参考 Can I use - CSS Nesting。

需要注意的是，CSS 嵌套本质上只是原生 CSS 的"语法糖"。无论是手动平铺还是嵌套写法，最终生成的选择器及其特异性（优先级）完全一致。

因此，在实际开发中，推荐如下使用方式：

• 结合 BEM 命名规范，将样式模块化管理，提升结构清晰度和可维护性。
• 控制嵌套层级在 2--3 层以内，避免出现"嵌套地狱"，确保样式易于维护和拓展。

基本用法

 .card {
   color: #333;
 ​
   .title {
     font-weight: 600;
   }
 ​
   .subtitle {
     color: #666;
   }
 }

等价的原生 CSS：

 .card { ... }
 .card .title { ... }
 .card .subtitle { ... }

使用 & 引用父选择器

& 代表"父选择器本身"，可以灵活地组合伪类、修饰类等。

 .button {
   padding: 8px 12px;
   background: #1677ff;
   color: #fff;
 ​
   &:hover {
     background: #145bd6;
   }
 ​
   &.is-active {
     background: #0e44a5;
   }
 ​
   &::before {
     content: "★";
     display: inline-block;
     margin-right: 6px;
     font-size: 1em;
     vertical-align: middle;
   }
 }

等价的原生 CSS：

 .button { ... }
 .button:hover { ... }
 .button.is-active { ... }
 .button::before { ... }

反向引用

嵌套中也可以实现"反向引用"，即子选择器中引用外部父级选择器：

 .card {
   .featured & {
     border: 1px solid #e5e6eb;
   }
 }

等价的原生 CSS：

 .featured .card { ... }

选择器组合与层级关系

嵌套语法同样支持各种选择器的组合与层级关系表达：

 .list {
   > .item { padding: 8px; }
   
   .bar { margin-top: 8px; }
 ​
   + .foo { margin: 8px; }
   
   ~ .baz {  background: #e5e6eb; }
 ​
   .entry, .cell {
     &:hover { background: #f6f7fb; }
   }
 }

等价的原生 CSS：

 .list > .item { ... }
 .list .bar { ... }
 .list + .foo { ... }
 .list ~ .baz { ... }
 .list .entry:hover,
 .list .cell:hover { ... }

媒体查询嵌套

CSS 嵌套语法天然支持媒体查询（如 @media、@container）的嵌套写法：

 .grid {
   background: #10b981;
   width: 100px;
   height: 100px;
 ​
   /* 这里可以直接写 width >= 768px 替代 min-width: 768px */
   @media (width >= 768px) {
     background: #ea580c;
   }
 }

等价的原生 CSS：

 .grid { ... }
 ​
 @media (min-width: 768px) {
   .grid { ... }
 }