CSS Nesting 是进入标准的新特性：.card { .title { } } 等价于 .card .title，& 显式引用父选择器（&:hover、&.active）。从此不安装任何预处理器也能写出层级清晰的样式，父子关系一目了然；全局命名冲突的风险也随着选择器作用下移而降低，配合 BEM 或 CSS Modules 使用更加顺手。
目前 modern Chrome、Safari、Edge 与较新版本的 Firefox 已原生支持，老环境用 Lightning CSS 或 PostCSS 的 postcss-nesting 插件降级，写法不变。注意它不是 CSS Modules 或 Scoped 的替代品：嵌套只缩小选择器书写范围，类名仍然是全局的，真要做到物理隔离仍需工具方案。
<style> /* 原生嵌套写法（现代浏览器支持）： .card { border: 1px solid #e5e7eb; .title { font-weight: 600; } &:hover { border-color: #4a9eff; } } */ .card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; } .card .title { font-weight: 600; margin: 0; } .card:hover { border-color: #4a9eff; } </style> <div class="card"> <h3 class="title">嵌套语法的渲染结果</h3> </div>