本文介绍如何利用 CSS 预处理器（如 Sass/Less）的嵌套语法，通过 & 引用符实现“当父元素具有特定类时，精准控制其直接子元素显示状态”的单一样式块写法，避免重复选择器，提升可维护性。
本文介绍如何利用 css 预处理器（如 sass/less）的嵌套语法，通过 `&` 引用符实现“当父元素具有特定类时，精准控制其直接子元素显示状态”的单一样式块写法，避免重复选择器，提升可维护性。
在标准 CSS 中，无法从子元素反向选择父元素或基于父元素状态定义子元素样式——这是 CSS 选择器固有的单向流限制（只能自上而下匹配，不能自下而上追溯）。因此，像 .asc > app-icon-sort-asc 这样的规则必须显式书写，且无法在 app-icon-sort-asc 的样式块内部“内联”地声明“若父级有 .asc 则生效”的逻辑。
但借助 Sass、Less 或 Stylus 等支持嵌套语法的预处理器，我们可以优雅重构：使用 &（父选择器引用符）将当前选择器插入到嵌套上下文中，从而在一个声明块中同时定义默认态与条件态。
✅ 正确写法（Sass 示例）：
app-icon-sort-asc {
display: none;
.asc > & {
display: inline;
}
}
编译后生成的标准 CSS 为：
app-icon-sort-asc {
display: none;
}
.asc > app-icon-sort-asc {
display: inline;
}
该写法的关键在于 & —— 它代表外层选择器 app-icon-sort-asc 的完整字符串，在嵌套中被自动拼接，确保语义准确、无冗余。
⚠️ 注意事项：
- 此方案依赖构建工具链支持 Sass/Less 编译（如 Angular CLI 默认支持
.scss），纯.css文件不识别&语法； -
&必须紧邻选择器（如.asc > &合法，.asc > &.active也合法），不可单独使用或置于属性值中； - 若需兼容多层级父状态（如
.asc.active > &），同样适用，保持可读性； - 不要尝试用
:has()模拟（如.asc:has(> app-icon-sort-asc) > app-icon-sort-asc）——尽管现代 CSS:has()已支持部分父级条件，但它无法触发子元素样式切换（仅用于父级自身匹配），且浏览器兼容性仍有限（Chrome 105+、Safari 15.4+，Firefox 尚未支持），不适用于本场景。
? 扩展建议：
若项目未使用预处理器，也可采用 BEM 风格命名或 CSS 自定义属性（CSS Custom Properties）解耦状态逻辑。例如：
app-icon-sort-asc {
display: var(--icon-display, none);
}
.asc > app-icon-sort-asc {
--icon-display: inline;
}
但需注意 CSS 变量继承限制，实际应用中仍推荐预处理器方案——简洁、直观、零运行时开销。
总结：没有原生 CSS 单选择器能“内置父状态判断”，但通过预处理器的 & 嵌套机制，可在源码层面实现逻辑聚合，显著提升样式可维护性与表达力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
