现代 CSS 解决方案：原生嵌套（Nesting） - ChokCoco
内容提要
CSS 原生嵌套已成为正式规范，Chrome 112 开始支持此功能。该功能允许使用类似 SASS 和 LESS 的嵌套语法，包括父选择器和子选择器的嵌套，支持伪类、伪元素及媒体查询，提升了 CSS 的灵活性和可读性。
延伸解读
标签选择器嵌套需显式使用 &
文章指出，当嵌套中使用标签名称选择器（如 h3、span）时，直接嵌套不会生效，必须在标签前加上 & 符号。例如 div { & h3 { ... } } 才能正确编译为 div h3。这一细节与 SASS 等预处理器不同，开发者迁移时需特别注意，避免因遗漏 & 导致样式失效。
嵌套内支持伪类、伪元素与媒体查询
原生嵌套不仅支持普通选择器，还允许在嵌套规则内使用伪类（如 :hover）、伪元素（如 ::before）以及媒体查询。例如 .media { @media (min-width: 600px) { & h3 { color: red; } } } 可在视口宽度大于 600px 时应用样式。这提升了代码组织灵活性，减少了重复书写父选择器的需要。
& 符号的灵活运用与自身嵌套
& 符号表示嵌套的父选择器本身，除了用于连接子选择器，还可实现更复杂的结构，如 div { & h2 & { ... } } 等价于 div h2 div。这种自身嵌套能力让选择器组合更自由，但需注意最终生成的选择器是否符合预期，避免过度嵌套导致样式难以维护。
Q&A
CSS 原生嵌套是什么时候成为正式规范的？
CSS 原生嵌套于 2023 年 9 月 2 日成为正式规范。
Chrome 哪个版本开始支持 CSS 原生嵌套？
Chrome 112 开始支持 CSS 原生嵌套。
CSS 原生嵌套的语法与 SASS 和 LESS 有什么相似之处？
CSS 原生嵌套允许使用类似 SASS 和 LESS 的嵌套语法，包括父选择器和子选择器的嵌套。
在 CSS 原生嵌套中，& 符号的作用是什么？
& 符号表示嵌套的父选择器本身，允许更复杂的嵌套结构。
CSS 原生嵌套支持哪些功能？
CSS 原生嵌套支持伪类、伪元素及媒体查询，提升了 CSS 的灵活性和可读性。
使用 CSS 原生嵌套有什么好处？
使用嵌套规则可以提升代码的可读性和灵活性，逐渐可以在实际代码中应用。
