如何用单个CSS选择器实现父类控制子图标组件的显隐状态？

你的需求是将图标元素的两种显示状态整合到单个CSS选择器的嵌套规则中，以下是可行的实现方式：

原生CSS实现（现代浏览器支持） #

原生CSS目前支持嵌套语法，可通过@nest规则实现你想要的父选择器嵌套效果：

app-icon-sort-asc {
  display: none;

  @nest .asc > & {
    display: inline;
  }
}

这里的&代表当前选择器（即app-icon-sort-asc），@nest允许我们向上关联父级选择器，最终编译后的效果和你原来的两段CSS完全一致，但结构上整合到了单个图标元素的规则下。

注：原生CSS嵌套已在Chrome 112+、Firefox 117+、Safari 16.4+等现代浏览器中支持，若需兼容旧版浏览器，可采用以下方案。

兼容旧浏览器的方案（CSS变量） #

通过CSS变量将显示状态逻辑集中到图标元素的规则中，父级仅修改变量值：

app-icon-sort-asc {
  --icon-display: none;
  display: var(--icon-display);
}

.asc > app-icon-sort-asc {
  --icon-display: inline;
}

这种写法虽然仍是两个选择器，但将核心的显示控制逻辑统一在了图标元素的规则内，接近你想要的整合效果。

预处理器方案（Sass/Less） #

如果你使用Sass、Less等CSS预处理器，可直接按照你伪代码的写法实现嵌套：

// Sass示例
app-icon-sort-asc {
  display: none;

  .asc > & {
    display: inline;
  }
}

预处理器会在编译时自动将其转换为你原来的两段标准CSS代码。

内容的提问来源于stack exchange，提问作者Konrad Viltersten