原生 CSS 嵌套（@nest）仅在 Chrome 119+、Edge 119+、Safari 17.4+ 稳定支持，Firefox 仍实验中；必须显式使用 @nest 包裹且 & 只能在其内最左侧出现，否则无效。
原生 CSS 嵌套（@nest）目前仅在 Chrome 119+、Edge 119+、Safari 17.4+ 中稳定启用，Firefox 仍处于实验阶段；若需全浏览器兼容，必须用 Sass/Less 等预处理器转译——这不是“选不选”的问题，而是“能不能用”的硬边界。
原生 CSS 嵌套必须写 @nest，且 & 只能在它内部用
很多人复制了类似 .card { & h2 { color: red; } } 的写法，结果样式完全不生效。原因很简单：现代浏览器（哪怕最新版）默认只认显式声明的 @nest 块，& 不是全局变量，它只在 @nest 规则内合法。
-
.card { @nest & h2 { color: red; } }✅ 正确，&紧贴开头，@nest显式包裹 -
.card { & h2 { color: red; } }❌ 非法，被整个忽略（DevTools 里连解析错误都不会报） -
.card { @nest .item & { color: blue; } }❌&必须在选择器最左侧，不能出现在中间或末尾 - 嵌套层级只能单层展开：
@nest & ul li a可以，但@nest & ul { @nest & li { ... } }语法错误
Sass 嵌套能自由缩进，但编译后选择器权重会飙升
Sass 不依赖浏览器支持，写法宽松得多，但它不是“更先进”，而是“更危险”——尤其当团队缺乏约束时，容易产出高特异性、难覆盖、难调试的选择器链。
- 合法 Sass 写法：
.nav { ul { li { a { &:hover { ... } } } } }→ 编译为.nav ul li a:hover - 权重直接到 4 类名级（1000+），比
.nav-link.is-active（2 类名 = 200）高五倍，后期想用 BEM 覆盖几乎要加!important - 无法用
&__elem这类 BEM 变体语法：Sass 允许&__title，但这是 Sass 自己的字符串拼接，不是标准 CSS，原生不识别 - 构建时必须确保 loader 配置正确：Webpack 用户常漏掉
sass-loader或误配additionalData，导致@import失效
别把 :has() 当成嵌套替代方案
看到 article:has(h2) 就以为能绕过嵌套？不行。:has() 是关系选择器，用于“根据子元素状态反选父容器”，它和嵌套语法解决的是完全不同的问题。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
-
article:has(h2) { padding-top: 2rem; }→ 表示“只要 article 里有 h2，就给 article 加 padding” -
article { @nest & h2 { font-size: 1.5em; } }→ 表示“给 article 下的 h2 设字体大小” - 两者语义、作用目标、浏览器支持都不同：
:has()在 Firefox 109+ 才支持，而@nest在 Safari 17.4+ 已稳定 - 混用会导致维护混乱：一个逻辑分散在两个机制里，比如“有 h2 的 article 加 padding，h2 本身设字号”，不如老老实实分开写两段规则
生产环境怎么安全落地？先查版本，再分层降级
真正在项目中用原生嵌套，不能靠“我本地 Chrome 能跑”就上线。得看真实用户环境，还得留退路。
- 检查目标浏览器版本：Chrome ≥119、Safari ≥17.4、Edge ≥119 —— Firefox 目前（2026 年 5 月）仍需手动开启
about:config → layout.css.nesting.enabled - 用 PostCSS 插件做渐进增强：
postcss-nesting可将@nest语法降级为普通后代选择器，但注意它不处理 Sass 风格缩进 - 不要混合使用：禁止在同一个文件里既写
@nest又写 Sass 缩进嵌套，构建工具容易冲突，CI 构建可能静默失败 - 最稳妥路径：新项目可试点
@nest+postcss-nesting降级；老项目继续用 Sass，但禁用超过 3 层的嵌套，用 BEM 命名代替结构耦合
真正容易被忽略的点是：原生嵌套不解决 HTML 结构合理性问题。你写了十层 @nest，但 HTML 里还是 <div><div><div>... 堆叠，语义和可访问性照样崩。嵌套只是写法糖，不是架构替代品。</div></div></div>
