原生CSS嵌套（&和@nest）仅在<style>或.css文件中生效，需Chrome 119+/Edge 119+/Safari 17.4+支持，Firefox不支持；写法错误（如漏&、多空格、缩进无&）或父选择器不匹配均导致整条规则静默失效。
原生 CSS 嵌套语法（& 和 @nest）不能直接用于 HTML 表格结构本身，它只作用于 CSS 规则块内；想用嵌套简化表格样式，必须写在 <style> 或外部 .css 文件中，且浏览器支持是硬门槛——Chrome 119+、Edge 119+、Safari 17.4+ 才稳定可用，Firefox 当前仍完全不解析。
为什么 .table-wrapper table { & th { color: #333; } } 可能不生效
这不是写法逻辑问题，而是浏览器兼容性或语法细节踩坑：
- Chrome ≤118 或 Safari ≤17.3 会静默忽略整条规则，DevTools Styles 面板里根本看不到它
-
&必须紧贴左括号后、无前置空格：&th❌，& th✅（后代），&:hover✅，但& :hover❌（多了一个空格，语义变成子元素 hover） - 父选择器没匹配到 DOM：比如写了
.table-wrapper，但 HTML 里实际是class="table__wrapper"，拼错就全失效 - 用了缩进但没加
&或@nest：.table { th { color: red; } }是非法语法，任何浏览器都不认
& 在表格样式中的典型用法与限制
& 适合表达“当前选择器 + 后缀”，对表格这类有明确层级的结构很实用，但要注意边界：
-
table.data-table { & thead th { font-weight: 600; } }→ 编译为table.data-table thead th -
& tbody tr:hover { background-color: #f5f9ff; }→ 编译为table.data-table tbody tr:hover - 不能省略
&写成tbody tr { }，否则会被当成独立选择器，脱离父上下文 -
&无法跨层级选兄弟元素，比如想给tr后面紧跟的tr加样式，必须用@nest
什么时候非得用 @nest 而不是 &
表格中常见需要精确控制关系的场景，& 搞不定，只能靠 @nest：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 相邻行样式：
@nest & tr + tr { border-top: 1px solid #e9ecef; } - 表头单元格悬停时影响整行：
@nest &:is(thead) & > tr:hover { background: #f0f8ff; } - BEM 风格修饰符：
@nest &.is-striped tbody tr:nth-child(even) { background: #f8f9fa; } - 注意：
@nest后必须跟完整选择器，@nest tr:hover❌，@nest & tr:hover✅
上线前最容易被忽略的三件事
嵌套语法不会报错、不降级、不警告，写错就是“看不见”：
- 检查构建流程是否启用
postcss-nesting插件——Vite 默认不开启，Webpack 需手动配，否则生产环境压缩后可能丢规则 - Safari 17.3 下
&:hover会静默失效，必须实测关键交互，不能只信 Can I Use 的绿标 - 凡涉及 Firefox 用户（哪怕占比 5%），就得提供降级方案：要么用传统展开写法，要么用 PostCSS 编译兜底，别指望原生语法全覆盖
真正麻烦的不是怎么写嵌套，而是判断“该不该用”——如果项目要支持 iOS Safari 16.x 或旧版 Edge，那所有 & 和 @nest 都得先过编译器，否则上线即失效。
