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

# 概述 CSS 原生嵌套允许在规则中嵌套子选择器，减少重复与提升可读性。需理解 `&` 的含义与特异性影响，避免过深嵌套与性能问题。 # 语法与示例 ```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 嵌套语法与工程实践一致。