Angular+SCSS场景下如何用单个disabled类作用于多个CSS类

你之前写的后代选择器不生效，核心原因是CSS选择器里的空格代表后代嵌套关系，你写的.ghost-button .ghost-button-label .plus-circle-position .disabled，匹配的是前三层元素内部嵌套的、带.disabled类的子元素，但你的.disabled类和几个按钮类是加在同一个div上的，不存在嵌套后代关系，自然匹配不到。

不需要给每个类单独写.disabled叠加的冗余规则，有两种非常简便的实现方式：

方案1：使用:is()伪类（优先推荐） #

直接单段选择器就能覆盖所有目标元素，代码最精简：

:is(.ghost-button, .ghost-button-label, .plus-circle).disabled {
  // 在这里统一编写所有禁用态样式即可，例如：
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none; // 直接拦截鼠标点击事件，减少额外的逻辑判断
}

这个选择器的匹配逻辑是：只要元素带有括号内任意一个类、同时带有.disabled类，就会应用这里的样式，所有主流现代浏览器均支持，Angular项目中可直接使用。

方案2：SCSS嵌套写法（兼容老旧浏览器） #

如果需要兼容IE11这类已停止官方支持的老旧浏览器，可以利用SCSS的父选择器标识符&做嵌套，源码里只需要写一次禁用样式，SCSS编译后会自动生成三段类叠加的选择器，不需要你手动重复写：

// 三个类的公共基础样式也可以统一写在这个区块里
.ghost-button,
.ghost-button-label,
.plus-circle {
  // 类的差异化样式可以单独拆分定义
  &.disabled {
    // 统一编写禁用态样式即可
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }
}

补充个实操细节：你当前是用div模拟按钮，加了pointer-events: none只能拦截鼠标点击，键盘聚焦触发的事件仍有可能响应，最稳妥的做法是在handleClickAdd方法开头加一行判断：if (this.blockAdditions) return;，双重保险避免禁用态下业务逻辑误触发。

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