父选择器 & 无法正确解析通常是因为嵌套层级过深导致生成的 css 选择器权重过高或结构冗余，或者在伪类、伪元素与属性选择器混用时未正确保留连接符。解决这一问题的核心做法是避免无意义的深层嵌套，并在组合选择器时确保 & 紧贴前缀，必要时使用空格或逗号分隔来明确作用域。
为什么深层嵌套会导致样式失效
当 SCSS 嵌套超过三层时，生成的 CSS 选择器会变得非常长，虽然浏览器能解析，但极易因特异性（Specificity）问题被后续样式覆盖，且难以维护。此外，某些预处理器在编译极深嵌套时可能会产生意外的空格或重复类名，导致目标元素无法匹配。
.nav {
.item {
.link {
.text {
color: red; // 生成 .nav .item .link .text
}
}
}
}
上述代码生成的 CSS 选择器特异性极高。如果 HTML 结构中缺少任意一层，样式将完全失效。建议将嵌套限制在两层以内，或使用 @at-root 跳出当前上下文。
伪类与属性选择器的连接错误
在使用 & 结合伪类（如 :hover）或属性选择器时，如果 & 前后存在多余空格，或者与伪类之间缺少必要的连接符，SCSS 编译器可能无法正确合并它们，导致生成的 CSS 语法错误或选择器不匹配。正确的写法必须保证 & 直接拼接伪类名称。
// 错误写法：中间有空格，变成后代选择器
.btn {
& :hover { color: blue; }
}
// 正确写法：直接拼接
.btn {
&:hover { color: blue; }
}
第一段代码会生成 .btn :hover，意为 .btn 内部所有元素的悬停状态，而非按钮本身的悬停。第二段代码生成 .btn:hover，符合预期。务必检查 & 与后续字符间是否有意外空格。
基于混合媒体查询时的具体表现
当在嵌套内部使用 @media 查询时，& 的行为会发生改变。它不再指向父级选择器本身，而是指向包含该媒体查询的最近的外层选择器。如果在媒体查询内再次嵌套并使用 &，它会基于媒体查询外的上下文进行拼接，这常导致开发者误以为选择器断裂。
.card {
width: 100%;
@media (min-width: 768px) {
& {
width: 50%;
.inner {
padding: 10px;
}
}
}
}
上述代码中，& 在媒体查询内展开为 .card，因此生成 @media (min-width: 768px) { .card { ... } }。而内部的 .inner 则生成 .card .inner。这种行为是符合规范的，但若开发者期望 & 指向媒体查询块内的某个新上下文，则会感到困惑。理解 & 始终引用“定义时”的父级，而非“运行时”的上下文，是避免此类问题的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
