本文介绍如何利用 CSS 预处理器（如 Sass/Less）的嵌套语法，通过 & 引用符实现“子元素样式响应父元素 class 状态”的简洁写法，避免重复选择器，提升可维护性。
本文介绍如何利用 css 预处理器（如 sass/less）的嵌套语法，通过 `&` 引用符实现“子元素样式响应父元素 class 状态”的简洁写法，避免重复选择器，提升可维护性。
在前端开发中，常需根据容器元素的动态 class（如 .asc、.desc）控制其内部子组件的显隐状态。例如，一个可排序的标题栏 <div appsortable> 点击后添加 <code>asc 类，此时其内部的排序图标 <app-icon-sort-asc></app-icon-sort-asc> 应显示；未激活时则隐藏。传统写法需定义两条独立规则：
app-icon-sort-asc {
display: none;
}
.asc > app-icon-sort-asc {
display: inline;
}这种方式虽有效，但存在语义割裂：两条规则逻辑强相关，却分散书写，不利于维护和理解。
更优雅的解法是使用支持嵌套语法的预处理器（如 Sass）。借助 &（父选择器引用符），可在子元素规则中直接“回溯”到外层选择器，并组合状态类：
app-icon-sort-asc {
display: none;
.asc > & {
display: inline;
}
}此处 & 代表当前选择器 app-icon-sort-asc，因此 .asc > & 编译后等价于 .asc > app-icon-sort-asc，语义清晰且结构内聚。
立即学习“前端免费学习笔记（深入）”；
✅ 优势说明：
- ✅ 单一声明块管理全部状态，符合“关注点集中”原则；
- ✅ 无需硬编码子元素标签名多次，降低出错风险；
- ✅ 易扩展：如需增加
.desc支持，只需追加.desc > & { display: inline-block; }； - ✅ 兼容现代 Angular CLI 默认集成的 Sass（
.scss文件）。
⚠️ 重要注意事项：
- 原生 CSS 不支持此类嵌套语法（
&和嵌套结构属于 Sass/Less/PostCSS 插件特性），直接写入.css文件将无效； - 若项目未启用预处理器，需改用 CSS 自定义属性（CSS Variables）+ JavaScript 驱动，或接受双规则写法；
-
>是子选择器，确保仅匹配直接子元素，避免意外影响深层嵌套图标。
最终 HTML 结构保持不变，仅依赖 class 的存在与否触发样式切换：
<!-- 图标隐藏 --> <div appSortable> <app-icon-sort-asc>↑</app-icon-sort-asc> <span>Name</span> </div> <!-- 图标显示 --> <div appSortable class="asc"> <app-icon-sort-asc>↑</app-icon-sort-asc> <span>Name</span> </div>
总结：虽然纯 CSS 无法实现“从子查父”的反向选择，但借助 Sass 的 & 机制，我们能以声明式、紧凑的方式表达“当父元素具有某 class 时，本元素应如何渲染”，既保持样式逻辑内聚，又提升代码可读性与可维护性。
