---

title: CSS Nesting 与选择器策略：简化层级与可维护性

keywords:

• CSS Nesting
• 嵌套选择器
• :is/:where
• 特异性治理
• 可维护性

description: 介绍原生 CSS 嵌套的语法与注意事项，结合 :is/:where 的特异性策略，降低选择器复杂度并提升样式可维护性。

date: 2025-11-27

sources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Nesting
• https://web.dev/learn/css/nesting/

categories:

• 文章资讯
• 编程技术

---

概述

原生 CSS 嵌套允许在规则内直接编写子选择器，减少重复前缀与提升可读性。结合 :is/:where 可控制特异性，避免选择器竞争。

语法与示例（已验证）

.card {
  padding: 16px;
  & > h2 { margin: 0 0 8px }
  & .btn { color: var(--accent) }
  &:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1) }
}

• 特异性：:where() 不增加特异性，:is() 按匹配分支计算；用 :where() 包裹通用前缀（来源）

实践建议

• 控制嵌套深度（≤ 3 层）；配合 @layer 与组件断点设计