chrome浏览器从112版本开始原生支持css嵌套语法，但需注意112–118为实验阶段，稳定可用需chrome 119+、edge 119+、safari 17.4+，firefox仍不支持，且必须使用&或@nest显式声明嵌套关系。
原生 CSS 嵌套目前只在 Chrome 119+、Edge 119+、Safari 17.4+ 中稳定可用，Firefox 仍不支持；写法稍有不慎就会被浏览器整条忽略，且不会报错、不会降级、不会提示——它就安静地失效了。
原生 CSS 嵌套必须用 & 或 @nest，不能直接写子选择器
很多人照着 Sass 习惯写：.card { h2 { color: blue; } }，这在原生 CSS 中完全无效，浏览器会跳过整条规则。必须显式表明嵌套关系：
-
&用于“当前选择器 + 后续部分”，比如.card { & h2 { color: blue; } }→ 编译为.card h2 -
&必须紧贴选择器开头，&.active合法，.active &或& .active（中间有空格）都非法 - 遇到复杂组合（如
article > header + section），&无法表达时，必须用@nest：article { @nest & > header + section { margin-top: 1rem; } } -
@nest是硬性语法要求，漏写或拼错（如@nestt）会导致该块样式彻底丢失
& 在伪类/伪元素里要特别注意空格
&:hover 和 &::before 是安全的，但一加空格就变味：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
&:hover→ 正确，等价于.btn:hover -
& :hover→ 错误，多了空格，变成后代选择器.btn :hover（匹配 .btn 内任意被 hover 的子元素） -
&::before→ 正确 -
& ::before→ 错误，同上，语义变成.btn ::before（虽然多数情况也生效，但逻辑已偏移） - 复合伪类如
&:is(.primary, .secondary)可以，但&:where(.active)要确保目标浏览器支持:where()
媒体查询可以内联，但不能嵌套在 @nest 里
你可以在选择器块里直接写 @media，它会自动绑定到父选择器作用域：
.dialog {
padding: 1rem;
@media (min-width: 768px) {
padding: 2rem;
}
&__header {
font-weight: bold;
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
}
但以下写法是非法的：
-
@nest & @media (max-width: 600px) { ... }——@nest只接受选择器，不接受 at-rule -
& { @nest & span { ... } }——@nest不支持嵌套在另一个嵌套块内部 - 所有媒体查询必须写在规则顶层或
&子规则中，不能包裹在@nest里
兼容性兜底不是可选项，而是上线前必做的检查项
如果你的项目需要支持 Safari 16–17.3、Chrome ≤118 或任何 Firefox 版本，& 和 @nest 都不会回退成普通 CSS —— 它们会被静默丢弃。这意味着：
- 不要指望构建工具自动 polyfill：原生嵌套是运行时特性，没有 postcss 插件能把它“编译”成旧版 CSS
- 若需兼容，只能用预处理器（Sass/Less）或手动展开，比如把
.card { & h2 { ... } }改成.card h2 { ... } - 检查
caniuse.com/css-nesting并结合你的真实用户 UA 数据判断是否启用——别只看“Chrome 112+ 支持”，112 到 119 之间还有多个不稳定实验阶段 - 最易被忽略的一点：
&在标签选择器嵌套中行为不一致（如article { & h2 { ... } }在 Safari 17.4+ 才稳定，17.0–17.3 可能失效）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
