概述

原生 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 与组件断点设计