Chrome 和 Edge 浏览器将实验性支持 CSS 原生嵌套语法，为开发者带来模块化和可维护性提升。嵌套语法允许将一个 CSS 规则放在另一个中，子规则选择器相对于父规则选择器。这有利于代码组织，消除重复，提高 CSS 代码可读性和维护性。使用嵌套规则时，可直接引用父规则匹配元素或指定“后代”以外的关系。
CSS 原生嵌套语法来了！
Chrome 和 Edge 浏览器将实验性支持 CSS 原生嵌套语法，为开发者带来模块化和可维护性提升。
嵌套语法允许将一个 CSS 规则放在另一个中，子规则选择器相对于父规则选择器。这有利于代码组织，消除重复，提高 CSS 代码可读性和维护性。
使用嵌套规则时，可直接引用父规则匹配元素或指定“后代”以外的关系。但以标识符开始的嵌套选择器无效，需稍作调整。
规范定义了嵌套选择器 (&)，表示与父规则匹配的元素。在嵌套规则的选择器中使用时，它指向父元素；在其他上下文中，表示与上下文中的 :scope 相同的元素。
嵌套选择器通过 :is() 选择器替换父规则选择器，与父规则选择器特异性相同。伪元素不支持嵌套选择器。
嵌套选择器的特异性等于父规则选择器列表中最大复杂选择器的特异性。在 DOM 结构中，使用嵌套选择器选择的元素将覆盖其他规则。
当前，CSS 嵌套语法处于开发者试用阶段，预计 Chrome 浏览器将在 112 版本正式推出此功能。
随着 CSS 工作组完成规范制定，CSS 嵌套语法规范可能发生变化。但可以预见，未来浏览器将支持原生嵌套语法，为开发者带来更高效、更灵活的 CSS 编写体验。2024-09-29
