嵌套本身不错误，但会放大选择器权重、作用域和编译逻辑隐患；真正生效的是最终css字符串及浏览器解析的specificity值，如.card .body .content:hover（0,3,1）意外提权导致.text-primary失效。
不是嵌套语法本身出问题，而是它放大了你原本就存在的选择器权重、作用域或编译逻辑隐患。真正生效的 CSS 从不认“嵌套”这个概念——它只认最终生成的选择器字符串和浏览器解析后的 specificity 值。
嵌套后选择器权重暴增，覆盖逻辑全乱了
SCSS/Less 的 & 在深层嵌套中会完整展开父路径，比如 .card .body .content { &:hover { color: blue; } } 编译成 .card .body .content:hover（权重 0,3,1），而你本意可能只是给 .content 加悬停态。这种意外提权会让后续加的简单类名（如 .text-primary）直接失效。
- 检查开发者工具「Computed」面板里被划掉的样式，鼠标悬停看提示是否写着 “specificity is lower than another rule”
- 避免在 ID 或属性选择器后用
&:hover，例如#header { &:focus { } }会生成#header:focus（权重 101），基本锁死覆盖 - 需要复用交互逻辑？抽成独立工具类：
.u-hover-text-red { &:hover { color: red; } }，再显式加到元素上
Vue scoped 样式下嵌套穿透失效
加了 scoped 的 <style></style> 会自动给所有选择器追加 [data-v-xxxx] 属性，此时普通嵌套写法（如 .wrapper { .el-input__inner { } }）根本匹配不到子组件内部元素。
- 必须用
::v-deep，且不能放在嵌套块内部：.wrapper { ::v-deep .el-input__inner { border-color: #409EFF; } }是错的；正确写法是顶层声明：::v-deep .el-input__inner { } - 预处理器（如 Sass）里不要混用
::v-deep和&，&::v-deep或::v-deep &都会导致编译异常或选择器错位 - Vue 3 中
/deep/和>>已废弃，强行使用可能被构建工具静默忽略
伪类嵌套触发非法选择器，样式直接被浏览器丢弃
SCSS 对 :not() 等伪类的支持很脆弱。像 .item { &:not(.active):hover { } } 看似合理，但实际编译出的选择器可能含有多层嵌套伪类，浏览器无法解析，整条规则灰掉且控制台无报错。
-
:not()只支持单层，合法写法只有.item:not(.active)或.item:not(.active):hover，不能出现:not(:not(.a))或:not(.a):not(.b)这类嵌套 - 要表达“不含某组合类”，用
:not(.disabled.required)，而不是:not(.disabled):not(.required)（后者语义是“既不 disabled 也不 required”） - 复杂状态判断别硬塞进选择器，改用 JS 控制 class 切换更可控
嵌套本身不是银弹，它只是让书写变短，却把权重计算、作用域边界、编译容错这些隐性成本全推给了开发者。最危险的不是样式没生效，而是你以为它生效了——直到上线后某个按钮在 modal 里突然不响应 hover，才在 DevTools 里发现那条规则早就被划掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
