CSS 原生嵌套是 CSS 规范中引入的一项新特性（CSS Nesting Module Level 1），允许开发者将样式规则嵌套在其他规则内部，类似于 Sass/SCSS 的嵌套写法。它使用 & 符号代表父选择器，使得样式代码更加结构化和易读。例如 .card { &:hover { color: red; } } 会被解析为 .card:hover { color: red; }。该特性已在 Chrome 120+、Edge 120+、Safari 17.2+、Firefox 117+ 等现代浏览器中获得原生支持。

主要区别在于：1) CSS 原生嵌套中，直接写选择器（不带 &）时，会在父选择器和子选择器之间自动添加空格（后代选择器），这与 Sass 行为一致；2) CSS 原生嵌套要求 & 必须在选择器的开头（除非整个选择器以 & 开头），而 Sass 更灵活；3) CSS 原生嵌套支持 at-rules（如 @media）的嵌套提升，这是 Sass 也支持的特性；4) Sass 支持属性嵌套（如 font: { size: 14px; }），CSS 原生嵌套的 Level 2 也计划支持，但目前尚未广泛实现。

& 是父选择器的占位符，在转译时会被替换为实际的父选择器。常见用法包括：
• &:hover → 父选择器的 hover 状态
• &.active → 父选择器同时具有 active 类
• & > .child → 父选择器的直接子元素
• .wrapper & → 父选择器作为 wrapper 的后代
• 选择器中可以有多个 &，如 & + & 表示相邻兄弟选择器
如果父选择器是列表（如 .btn, .link），则 & 会依次替换为每个选择器，生成完整的组合。

当 @media、@layer、@container 等 at-rules 出现在嵌套规则内部时，它们会被"提升"到外层，同时内部的选择器会与父选择器组合。例如：
.card { @media (max-width: 768px) { .title { font-size: 14px; } } }
转译为：
@media (max-width: 768px) { .card .title { font-size: 14px; } }
这使得响应式样式可以就近组织在组件规则内部，提高代码可维护性。

截至 2025 年，CSS 原生嵌套已获得广泛支持：Chrome 120+、Edge 120+、Safari 17.2+、Firefox 117+、Opera 106+、Samsung Internet 25+ 均原生支持。覆盖了全球约 92%+ 的用户。对于需要兼容旧浏览器的生产环境，建议使用本工具将嵌套语法转译为标准 CSS，或使用 PostCSS 等构建工具自动处理。CSS 原生嵌套是 W3C 正式规范，未来支持率会进一步提升。

CSS 规范没有硬性限制嵌套深度，但浏览器实现可能会有实际限制（通常足够深）。从可维护性角度，建议嵌套深度不超过 3-4 层。过深的嵌套会导致：选择器过长、特异性过高难以覆盖、代码可读性下降。最佳实践是将嵌套用于组织相关的样式（如组件的不同状态和变体），而非简单地复制 DOM 结构。使用 & 明确表达选择器关系，避免隐式的后代选择器造成的意外匹配。