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

---

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

keywords:

• CSS Nesting
• 嵌套选择器
• & 引用
• @nest
• 兼容策略

description: 采用原生 CSS 嵌套语法提升样式结构化与可读性，结合 & 引用与 @nest 处理复杂关系，并给出兼容与性能建议。

categories:

• 文章资讯
• 技术教程

---

概述

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_nesting
• W3C：CSS Nesting Module — https://www.w3.org/TR/css-nesting-1/