CSS中是否可以组合使用多个伪类来避免重复编写相同样式？

• 方案1：原生CSS选择器分组
  这是最直接的无额外依赖方案，把需要复用同一样式规则的多个选择器用英文逗号分隔即可，只会写一次样式规则，没有冗余代码：

.randomClass:hover, .randomClass:active {
  background-color: green;
}

注意你之前尝试的.randomClass:hover:active是交集选择器，仅会匹配同时触发悬浮和点击两个状态的场景，无法覆盖「单独悬浮、单独点击（比如键盘触发激活态）」的情况，不要混用。

• 方案2：CSS变量复用属性值
  如果两个状态除了共用样式外，还有各自独有的样式规则，可以用CSS变量存储共用的属性值，后续修改只需要改一处变量即可：

/* 可根据实际需求把变量定义在合适的作用域下 */
:root {
  --interactive-btn-bg: green;
}
.randomClass:hover {
  background-color: var(--interactive-btn-bg);
  /* 可单独加hover特有的样式 */
}
.randomClass:active {
  background-color: var(--interactive-btn-bg);
  /* 可单独加active特有的样式，比如缩小偏移 */
  transform: scale(0.98);
}

• 方案3：CSS预处理器嵌套语法
  如果项目中使用Sass/SCSS、Less等预处理器，可以用父选择器标识符&简化写法，结构更清晰：

.randomClass {
  &:hover, &:active {
    background-color: green;
  }
}

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