嵌套超过3层的CSS选择器易导致耦合强、复用差、调试难、结构微调即失效，且高优先级但低可维护性；应采用BEM命名、CSS变量、display: contents等方案解耦。
为什么嵌套超过 3 层的 CSS 选择器容易出问题
嵌套过深（比如 .container .sidebar .content .item .title）会导致样式耦合强、复用性差、调试困难，而且一旦 DOM 结构微调，样式就可能失效。更关键的是，这类选择器优先级高但可维护性极低，团队协作时新人根本不敢动。
用 BEM 命名替代深度嵌套
BEM（Block-Element-Modifier）强制扁平化命名，把结构依赖转为语义约定，直接砍掉层级。不是靠父级限定子元素，而是靠类名本身表达归属关系。
-
card是 block，card__header是 element，card--large是 modifier - 避免写
.card .card-header，直接用card__header - HTML 中多个元素并列加 class，不靠嵌套关系控制样式
.card { }
.card__header { margin-bottom: 1rem; }
.card__body { padding: 1rem; }
.card--featured { border: 2px solid #007bff; }
用 CSS 自定义属性（CSS Variables）解耦重复样式
深层嵌套常用来复用颜色、间距等值，其实完全可以用 --spacing-sm、--color-primary 这类变量统一管理，再通过 var(--spacing-sm) 注入，无需靠祖先选择器层层传递。
- 变量定义在
:root或某个 block scope 下即可，不依赖 DOM 深度 - 修改主题色只需改一处变量，不用遍历所有嵌套选择器
- 注意：IE 不支持，如需兼容得用 PostCSS 插件降级
用 display: contents 或 replace 移除无意义的包裹节点
很多嵌套其实是 HTML 为了“结构正确”硬加的 wrapper（比如 <div class="list"><div class="list-item">…</div></div>），但这些 div 对布局没实质作用，反而拉长选择器链。
立即学习“前端免费学习笔记（深入）”；
-
display: contents让父元素不参与盒模型，子元素直接成为视觉上的一级子项 - 搭配
grid或flex容器时，能大幅简化选择器，比如直接写.list-item而非.list .list-item - 注意：该属性会让父元素失去盒模型特性（如 padding、background），且部分屏幕阅读器支持不一致
.page .main .section .content .text p em。 
