问题不在于jQuery。问题出在你的CSS规则上。

浏览器总是会应用更具体的规则，例如:

<div id="my-div">
   <ul class="my-list">
      <li class="my-item">
   </ul>
</div>

#my-div > ul > li.my-item {
    background-color: none;
}
.my-item {
    background-color: red
}

浏览器将检查哪个规则更具体，在这种情况下，第一个显然更具体。

如果你想重写这个规则，你必须写一个至少具有相同专用性的规则(检查这个专用性计算器)。

如果规则具有完全相同的特异性，则最后一个规则将被应用。

使用你的浏览器开发工具来检查你的元素上应用了什么规则，然后编写一个至少具有相同特异性的规则。

没有一个精确的解决方案，因为整个页面都应该分析。

为什么不重要?

首先让我们了解!important是如何工作的。重要将使你的规则具有最高的专一性，就像"无限"专一性。

因此该规则只能为该规则之后的规则重写，也带有!important.

好了，这就解决了我的问题，对吧?

虽然这解决了你现在的问题，这种做法是不好的，并会给你一个非常难以维护的CSS。

如果你在所有事情上都使用它，你只是杀死了CSS的C(层叠样式表)，你将只需要依赖规则顺序，有时你将无法编写你想要的规则。

每个开始使用CSS的人都认为Cascade是一个无聊的东西，在所有东西上使用!important是好的，但事实并非如此。你迟早会意识到的。

因为.item1已经有一个background-color，并且覆盖了新的.class2类添加的新的background-color，所以你可以尝试使你的规则更具体，如:

.item1.class2 {
   ...
   background-color: rgba(0, 0, 0, .85);
}

你的代码是为我工作(见下文)。如果您的样式被其他规则覆盖，请检查您的开发控制台。在这种情况下，使用更高规格的，例如.item1.class2来覆盖已经设置的background-color。

!important不是一个解决方案，但最好的变通(这是不好的做法)。试着组织你的规则，使之有适当的顺序。

// JS with jQuery
$('.item1').addClass('class2');

.item1 {
  font-size: 40px;
  text-align: center;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0px 0px;
  text-decoration: none;
  color: white;
  margin: -10px 0px;
  -webkit-transition: background-color 0.4s;
  -moz-transition: background-color 0.4s;
  transition: background-color 0.4s;
}
.item1:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.item1.class2 {
  background-color: rgba(0, 0, 0, .85);
  border: 1px solid black;
  cursor: default;
  /* background-color and border aren't applied */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1"></div>

如果你加载jquery库，仍然不能工作。您可以在样式中添加!important，以便可以覆盖样式，下面是class2的代码示例。

.class2 {
    background-color: rgba(0, 0, 0, .85) !important;
    border: 1px solid black !important;
    cursor: default !important;
    /* background-color and border aren't applied */
}