嵌套超3层的CSS选择器会失控，因父结构变动导致样式全崩、团队不敢修改且掩盖语义意图；应改用语义class（如btn-primary）、状态前缀（is-active）、角色型命名（sidebar）及BEM等规范，并通过DevTools定位重构深层选择器。
为什么嵌套超过 3 层的 CSS 选择器会失控
因为每多一层嵌套，就多一个耦合点：父元素结构一变，样式全崩；团队协作时没人敢动 .header .nav .item .link:hover 这种链式选择器，怕牵一发而动全身；更关键的是，它掩盖了语义意图——你真想选“导航链接”，还是在猜“第四个子元素里带 hover 的那个 a”？
用语义 class 替代结构推导的实操原则
把“它在哪儿”换成“它是什么”，直接给元素贴身份标签。不是靠 DOM 位置找它，而是靠业务含义认它。
-
btn-primary比.modal-footer button:first-child更稳定、可复用 - 组件内状态用
is-active、is-disabled等前缀，不依赖:hover或:focus的伪类链式组合 - 避免用
left-col、top-banner这类布局描述类名——它们随 UI 调整立刻失效；改用sidebar、hero-section这类角色型命名 - 当多个样式需共存，用空格分隔多个 class：
，而不是写.btn.btn--large.btn--success选择器
如何安全地重构现有深层选择器
别一次性重命名所有 class。先定位高频出问题的模块，用浏览器开发者工具筛选出实际生效的规则，再逐个替换。
- 打开 DevTools → Elements 面板 → 选中元素 → 右侧 Styles 面板看哪些规则命中了它，重点关注带多个空格或
>的选择器 - 对每个深层选择器，问一句：“如果这个 HTML 未来被抽成 Web Component，它还能工作吗？” 答案是否定的，就该换
- 用
[class*="btn"]这类属性选择器临时兜底过渡，但不要长期保留——它是妥协，不是方案 - 配合 CSS Modules 或 scoped style（如 Vue 的
.card {
/* 好：独立、语义清晰 */
}
.card__title {
/* 好：BEM 命名，明确归属 */
}
.card.is-expanded {
/* 好：状态类，不依赖子元素 */
}
/* 坏：删掉这一行 */
/* .container .main .section .card .header h2 */
真正难的不是写 class 名，是每次加新样式时，克制住“顺手再套一层父容器”的冲动。一旦开始用语义 class 描述意图，DOM 结构反而成了可以随时调整的实现细节。
立即学习“前端免费学习笔记（深入）”；