我正在尝试通过添加一个新的CSS类来更改特定<li>元素的CSS属性。
我试过下面的jQuery代码，它是按照我想要的方式工作的。

$("li").click(function(event) {
  let active = event.target.id;
  // animation(event);
  if (active == "equal") {
    $("#" + active).css("background-color", 'hsl(6, 70%, 34%)');
  }

});

/* equals button */

ul:last-child li:last-child {
  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%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="buttons">
  <ul>
    <li id="seven">7</li>
    <li id="eight">8</li>
    <li id="nine">9</li>
    <li id="del">Del</li>
  </ul>
  <ul>
    <li id="four">4</li>
    <li id="five">5</li>
    <li id="six">6</li>
    <li id="add">+</li>
  </ul>
  <ul>
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="sub">-</li>
  </ul>
  <ul>
    <li id="aps">.</li>
    <li id="zero">0</li>
    <li id="div">/</li>
    <li id="mul">x</li>
  </ul>
  <ul class="row">
    <li class="col-5" id="reset">Reset</li>
    <li class="col-5 equalBtnAnimation" id="equal">=</li>
  </ul>
</section>

我以为下面的类会覆盖css属性，但它没有。检查代码后，我看到了这一点：

以下是输出：

这是我从上面的jQuery代码中得到的预期输出：

相反，我想把它作为一个类来添加。如果有人能告诉我为什么上面的不起作用，那将是一个很大的帮助...