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

发表评论 取消回复