CSS Nesting：原生层级选择与可读性提升

概述CSS Nesting 允许在选择器内嵌套子选择器与状态选择，提升样式的层次化与可维护性。通过 `&` 引用当前选择器，并在复杂关系下使用 `@nest` 语法。用法/示例.card { & .title { font-weight: 600 } &:hover { transform: translateY(-2px) } & .btn { &:is(:hover, :focus-visible) { background-color: #4f46e5; color: #fff } } } @nest .grid & { margin-block: 16px } 工程建议控制嵌套层级，建议不超过 3 层，保持选择器简洁。结合组件根类限定作用域，避免选择器溢出导致全局污染。对不支持的环境采用构建时转译或提供非嵌套等价规则。参考与验证MDN：CSS Nesting — https://developer.mozilla.org/docs/Web/CSS/CSS_nestingW3C：CSS Nesting Module — https://www.w3.org/TR/css-nesting-1/