原生 CSS 嵌套仅在 <style> 标签或外部 .css 文件中生效，必须由支持浏览器（Chrome 116+/Firefox 117+/Safari 17.4+）解析；style 属性、@import、<script> 等位置均无效，且必须显式使用 & 或 @nest，缩进无意义。
原生 CSS 嵌套（Nesting）不是 HTML 的能力，它只在 <style> 标签或外部 .css 文件中生效，且必须由支持该特性的浏览器解析——HTML 本身不处理、不识别嵌套语法。
哪些地方能写原生嵌套？哪些绝对不能
能写的位置只有两个：<head><style></style></head> 或独立的 main.css 文件。所有其他位置都无效。
-
style属性里写<div style="& h2 { color: red; }">→ 浏览器直接丢弃整条声明，不报错也不渲染 - 用
@import引入含嵌套的 CSS 文件 → 若浏览器不支持，整块规则静默跳过，DevTools 的 Styles 面板里根本看不到 - 把嵌套规则塞进
<script>标签、注释块、或 JS 字符串里 → 完全无意义，CSS 解析器根本不会读取
& 和 @nest 必须显式写出，缩进不算数
原生 CSS 不认空格缩进语义。下面这种写法是非法的，会被整条忽略：
.card {
h2 { color: red; } /* ❌ 没 &，没 @nest，浏览器当语法错误 */
}正确写法必须带 & 或 @nest：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
& h2→ 等价于.card h2，最常用 -
&:hover→ 等价于.card:hover -
@nest .title→ 等价于.card .title，适合 BEM 修饰符场景 -
@nest &.is-active→ 正确写法；&.is-active单独写会变成.card.card.is-active（重复类名）
浏览器支持现状与检测方式
Chrome 116+、Firefox 117+、Safari 17.4+ 才默认启用。低于这些版本时，嵌套规则块会完全消失，连警告都没有。
- 检查 Chrome 是否开启：
chrome://flags/#enable-css-nesting，确认状态为 Enabled - Firefox 用户需确保
layout.css.nesting.enabled未被禁用 - Safari 17.0–17.3 需手动开启实验特性；17.4 是首个默认开启的稳定版
-
@supports (nesting-selector: selector())目前仅 Firefox 支持该检测，Chrome/Safari 尚未实现
生产环境要不要直接用？关键看兼容性兜底
如果你的用户里还有 iOS Safari 16.x、旧版 Edge 或某些国产内核浏览器，裸用原生嵌套等于放弃样式——它们会静默跳过所有嵌套规则，页面变成无样式的裸 HTML。
- 上线前必须查目标用户实际覆盖的浏览器版本分布
- 推荐搭配
postcss-nesting插件做降级编译，生成兼容的扁平 CSS - 别指望
&能修复 HTML 结构错误：比如写了.list { & li { padding: 4px; } }，但 HTML 中<ul>下直接放了<p>，那li规则依然不生效
最容易被忽略的一点：原生嵌套只是书写语法糖，它不改变选择器权重、不新增匹配逻辑、也不绕过浏览器对 HTML 合法性的校验。写对了语法，不等于样式就一定上得去。
