如何避免CSS重复类选择器？实现指定元素差异化样式

你的需求很明确：.class-action:hover 只需要 color: black 和 font-weight: bold 两个样式，.class-action.activeOne 要包含这两个样式，再加上 margin: 3px 0px 和 border-bottom: 2px solid black。

你给出的初始CSS写法本身就是最精简、无冗余的最优方案，完全不需要再做额外整合：

.class-action:hover, .class-action.activeOne {
  color: black;
  font-weight: bold;
}

.class-action.activeOne {  
  margin: 3px 0px; 
  border-bottom: 2px solid black;
}

这种写法逻辑清晰：先把两个选择器的公共样式抽出来放在同一个规则块复用，再单独给.class-action.activeOne补充独有的样式。既避免了样式代码重复，也没有多余的选择器重复，是CSS处理「公共样式+独有样式」场景的标准高效写法。

而你提供的第二种写法确实存在样式代码冗余问题（重复定义了color和font-weight），反而不如初始写法合理。

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