嵌套选择器越深越易出问题，因浏览器右向左解析导致性能下降且维护困难；应改用语义化class如.nav-link替代结构依赖，并禁用div ul li a等标签依赖写法。
为什么嵌套选择器越深越容易出问题
深度嵌套的 CSS 选择器（比如 .header .nav .menu .item a:hover）不仅难维护，还会拖慢浏览器渲染性能。浏览器是从右往左解析选择器的，a:hover 虽小，但前面每多一层父级约束，就要回溯匹配更多节点。更现实的问题是：改个 DOM 结构，样式就失效；加个新功能，不敢动老 HTML，怕连带崩掉十来个样式。
怎么把嵌套选择器“扁平化”成 class
核心原则：用语义化、可复用的 class 名替代结构依赖。不是“这个 a 在 menu 里”，而是“这是导航链接”。
- 把
.header .nav .menu .item a换成.nav-link或.menu-item-link - 避免用父容器名做前缀（如
.header-logo），优先用功能/角色命名（如.site-logo） - 用 BEM 风格时，保持层级只有一层：推荐
.menu__item，不写.menu__list .menu__item - 组件内局部样式，可用 CSS Modules 或
:where()降低权重，避免靠嵌套提权
哪些嵌套写法必须立刻改
以下模式基本等于给未来埋雷，遇到就该重构：
-
div ul li a—— 完全依赖标签名，换nav > ul > li > a都比它强，但最好直接上.nav-link -
.page .content .section .card .title—— 四层结构，任意一级加 wrapper 就挂，应改为.card-title -
[data-role="header"] > div:first-child > h1—— 属性选择器 + 伪类 + 子选择符，权重高、性能差、可读性归零
改完记得验证的三件事
不是加了 class 就万事大吉，要确认：
立即学习“前端免费学习笔记（深入）”；
- HTML 中是否漏加新 class？尤其动态插入的节点（如 JS 渲染的列表项）
- 有没有因 class 复用导致意外样式污染？比如
.btn在表单和弹窗里表现不一致，需加命名空间（.modal-btn/.form-btn） - 旧嵌套规则是否还残留在 CSS 文件里？用搜索
>、+、空格+空格 这些符号快速定位
.nav-list {
display: flex;
}
.nav-list__item {
margin-right: 1rem;
}
.nav-list__link {
color: #333;
text-decoration: none;
}
/* 不要再写：
.header .nav ul li a { ... }
*/真正麻烦的不是写多少 class，而是让每个 class 只承担一件事。一个元素有多个职责？那就多加几个 class，别指望一个选择器包打天下。
