如何通过CSS类覆盖元素样式？自定义类未生效原因及解决

问题根源 #

这是典型的CSS优先级冲突：

• 原有样式选择器 ul:last-child li:last-child 属于复合选择器，优先级权重为 0,0,1,2（伪类last-child占10分，两个元素选择器各占1分，总计12分）
• 自定义类 .equalBtnAnimation 是单一类选择器，优先级权重仅为 0,0,1,0（10分）
  由于原有选择器优先级更高，自定义类的样式被浏览器忽略了。

而你用jQuery的.css()方法生效，是因为该方法会把样式直接写入元素的行内样式，行内样式优先级权重为1,0,0,0（1000分），远高于外部样式表中的规则。

解决方案 #

1. 提升自定义类的优先级（推荐） #

通过组合选择器，让自定义类的优先级超过原有样式：

/* 结合原有结构选择器，优先级权重为0,0,1,3（13分） */
ul:last-child li:last-child.equalBtnAnimation {
  background-color: hsl(6, 70%, 34%);
}

或者直接利用元素ID（优先级更高，权重0,1,0,1，101分）：

#equal.equalBtnAnimation {
  background-color: hsl(6, 70%, 34%);
}

2. 重构基础样式结构 #

把按钮的基础样式抽成独立类，让两个类优先级一致：

/* 基础按钮样式 */
.equal-btn {
  margin: 0 4% 0 0;
  color: hsl(0, 0%, 100%);
  background-color: hsl(6, 63%, 50%);
  box-shadow: 0px 3px 0px 0px hsl(6, 70%, 34%);
}

/* 动画样式（要放在基础样式之后） */
.equalBtnAnimation {
  background-color: hsl(6, 70%, 34%);
}

修改HTML，给按钮添加基础类：

<li class="col-5 equal-btn" id="equal">=</li>

同优先级下，后定义的样式会覆盖先定义的规则。

3. 使用!important（不推荐） #

在自定义类样式中添加!important强制覆盖，这会跳过优先级规则，仅在紧急情况使用：

.equalBtnAnimation {
  background-color: hsl(6, 70%, 34%) !important;
}

调整后的jQuery代码（改用类操作） #

替换原有的行内样式设置，改为添加类：

$("li").click(function(event) {
  let active = event.target.id;
  if (active === "equal") {
    $("#" + active).addClass("equalBtnAnimation");
    // 如需点击其他按钮移除动画类，可添加：
    // $("li").not("#equal").removeClass("equalBtnAnimation");
  }
});

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