原生CSS嵌套只能写在块或外部.css文件中，不能用于style属性；需Chrome 116+/Firefox 117+/Safari 17.4+支持，不支持时整条规则被静默忽略。
原生 CSS 嵌套（CSS Nesting）不能在 HTML 中“使用”，它只写在 <style></style> 块或外部 .css 文件里，且必须由支持该特性的浏览器解析——HTML 本身不处理、不识别、也不执行任何嵌套语法。
原生 CSS 嵌套必须写在 <style></style> 或 .css 文件中，不能塞进 style 属性
很多人误以为可以在 <div style="...& h2 { color: red; }"> 这类行内样式里写嵌套，这是完全无效的。浏览器会直接忽略整个 <code>style 属性值中非法部分，甚至可能导致整条声明被丢弃。
-
style属性只接受扁平的属性-值对（如color: red; margin: 0），不支持选择器、嵌套、&或@nest - 合法位置只有两个：
<style>...</style>或独立的main.css文件 - 哪怕你用
@import引入一个含嵌套的 CSS 文件，只要浏览器不支持CSS Nesting，那些规则块就会被静默跳过
& 和 @nest 的区别：什么时候该用哪个
& 是快捷引用当前选择器，@nest 是显式声明嵌套关系——两者语义不同，不能混用或省略。
-
&只能出现在规则块内部，代表外层选择器本身，例如：.card { & h2 { color: #222; } }编译后等价于.card h2 -
@nest用于更灵活的组合，比如想匹配.card下任意后代的.title，但又不想重复写.card：.card { @nest .title { font-weight: bold; } }→ 等价于.card .title - 不写
&或@nest的缩进写法（如 Sass 风格）在原生 CSS 中**完全无效**，浏览器会当作语法错误忽略整条规则 - 如果目标是兼容旧浏览器，别用
&，改用预处理器（如 Sass）编译成扁平 CSS
Chrome 116+ / Firefox 117+ / Safari 17.4+ 才真正稳定支持，低版本会静默失效
不是“报错”，而是根本没反应——打开 DevTools 的 Styles 面板，你会发现带 & 的规则块直接消失，连警告都没有。
立即学习“前端免费学习笔记（深入）”；
- 检查是否启用：访问
chrome://flags/#enable-css-nesting（Chrome），确认状态为Enabled；Firefox 用户需确保未禁用layout.css.nesting.enabled - Safari 用户注意：17.4 是首个默认开启的稳定版，17.0–17.3 需手动开启实验特性
- 用
@supports (nesting-selector: selector())可做特性检测，但目前仅 Firefox 支持该@supports查询，Chrome/Safari 尚未实现 - 生产环境建议搭配 PostCSS 插件（如
postcss-nesting）做降级，否则老用户看到的是无样式的裸 HTML
最容易被忽略的一点：原生嵌套不改变 HTML 结构，也不修复标签错误。如果你写了 .list { & li { padding: 4px; } }，但 HTML 里 <ul></ul> 下面直接放了 <p></p>，那这个样式照样不会作用到 <p></p> 上——CSS 嵌套再方便，也救不了非法 DOM。
