---

title: CSS 嵌套：Nesting 的语法、特异性与工程实践

keywords:

• CSS Nesting
• 嵌套语法
• 特异性
• 选择器
• 可维护性
• 性能

description: 解释原生 CSS 嵌套的语法与与选择器的关系，说明特异性与可维护性的注意，给出与 @layer/ :where/ :is 协作的工程实践与参考。

categories:

• 文章资讯
• 编程技术

---

概述

CSS 原生嵌套允许在规则中嵌套子选择器，减少重复与提升可读性。需理解 & 的含义与特异性影响，避免过深嵌套与性能问题。

语法与示例

.card {
  padding: 1rem;
  & .title { font-weight: 600 }
  &:hover { box-shadow: 0 0 8px rgba(0,0,0,.1) }
  @media (min-width: 640px) { & { padding: 1.5rem } }
}

• & 引用当前选择器；媒体查询与支持查询可在嵌套内使用。

工程与特异性

• 控制嵌套层级（推荐 ≤3 层）；避免过深导致选择器复杂与匹配成本高。
• 与 @layer/:where() 协作降低特异性；对需要高覆盖的场景使用 :is() 合并。

参考与验证

• ［参考1］MDN 中文：CSS Nesting 语法与示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Nesting_selector
• ［参考2］web.dev：CSS 嵌套与工程实践指南：https://web.dev/articles/css-nesting

关键词校验

关键词与 CSS 嵌套语法与工程实践一致。