本文系统讲解 SCSS 中 &（父选择器）的核心机制，包括其语法规范、嵌套组合方式、实际编译效果及典型误用场景，帮助开发者正确运用嵌套增强可维护性，避免混淆 CSS 原生能力边界。
本文系统讲解 scss 中 `&`（父选择器）的核心机制，包括其语法规范、嵌套组合方式、实际编译效果及典型误用场景，帮助开发者正确运用嵌套增强可维护性，避免混淆 css 原生能力边界。
在 SCSS（Sassy CSS）中，& 是一个编译时占位符，用于显式引用当前嵌套规则的直接父选择器。它不是运行时 CSS 属性，也不参与浏览器渲染逻辑，而是在 SCSS 编译为标准 CSS 的过程中，被静态替换为外层选择器字符串。理解 & 的本质，是写出清晰、可预测、高性能样式代码的关键。
✅ 正确用法：& 作为父选择器引用符
& 必须作为选择器的第一个字符出现，后可紧跟伪类（:hover, :focus）、伪元素（::before）、BEM 后缀（__element, --modifier）或组合符（+, ~, >），从而生成复合选择器：
// 示例 1：基础悬停状态
a {
font-size: 16px;
&:hover {
color: #007bff;
}
}
// 编译为：
// a { font-size: 16px; }
// a:hover { color: #007bff; }
// 示例 2：BEM 风格修饰符
.card {
padding: 1rem;
&__header {
font-weight: bold;
}
&--featured {
border: 2px solid gold;
}
}
// 编译为：
// .card { padding: 1rem; }
// .card__header { font-weight: bold; }
// .card--featured { border: 2px solid gold; }
// 示例 3：兄弟选择器 + 父引用
h2 {
margin-bottom: 0.5rem;
+ p {
margin-top: 0;
}
}
// 注意：此处未用 `&`，但等价于 `& + p`；显式写法更清晰：
h2 {
margin-bottom: 0.5rem;
& + p {
margin-top: 0;
}
}
// 编译为：h2 + p { margin-top: 0; }⚠️ 常见误区：parent-selector 不是合法 CSS 属性
问题中提到的 parent-selector: &; 完全无效且非标准。CSS 规范（包括 W3C Selectors Level 4）从未定义 parent-selector 这一属性。该写法不会产生任何样式效果，浏览器会直接忽略该声明行。
- ❌ 错误认知：& 可用于生成“运行时可读取的父选择器值”或作为 CSS 自定义属性；
- ✅ 正确事实：& 仅在 SCSS 编译阶段起作用，输出结果中 & 已被彻底替换，不会以任何形式保留在最终 CSS 文件中；
- ? 验证方式：检查 .css 输出文件——你永远找不到 parent-selector: 字样。
? 补充说明：虽然 CSS 尚未原生支持“选择父元素”，但 Selectors Level 4 提案中的 :has() 伪类（如 li:has(> a.active)）已获现代浏览器逐步支持（Chrome 105+、Firefox 121+、Safari 15.4+），可用于实现真正的父级条件选择，但它与 & 完全无关——前者是运行时 DOM 匹配逻辑，后者是编译期字符串拼接工具。
立即学习“前端免费学习笔记（深入）”；
? 使用建议与最佳实践
- 位置严格性：& 必须位于选择器最前端，div & 或 .btn:hover & 均非法；
- 不可嵌套使用：&& 或 & & 无意义，SCSS 不支持递归引用；
- 避免过度嵌套：即便有 &，也建议嵌套深度 ≤ 3 层，防止生成冗长低效的选择器（如 .nav .menu .item .link:hover）；
-
与插值配合进阶用法（可选）：
$prefix: "icon"; .#{$prefix} { display: inline-block; &--success { color: green; } &--error { color: red; } } // 输出：.icon { ... } .icon--success { ... } .icon--error { ... }
掌握 & 的本质——它是 SCSS 提供的静态、确定性、编译期选择器复用语法糖——就能规避概念混淆，写出既简洁又健壮的样式代码。记住：所有魔法都在 .scss → .css 的一步转换中完成，浏览器看到的，永远只是标准、纯净的 CSS。
