javascript - jquery 中的 addClass 无法正常工作

Question

我有一个使用 jQuery 添加类 (.class2) 的代码。该类已应用，但该类的某些样式不起作用:

$('.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);
}
.class2 {
    background-color: rgba(0, 0, 0, .85);
    border: 1px solid black;
    cursor: default;
    /* background-color and border aren't applied */
}

Answer 1

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

解释

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

HTML:

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

CSS:

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

.my-item {
    background-color: red
}

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

如果你想覆盖这个规则，你必须写一个至少具有相同特异性的规则(Check this specificity calculator) .

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

解决方案

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

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

为什么不!重要？

首先让我们了解!important 是如何工作的。 !important 将使您的规则具有最高的特异性，如“无限”特异性。

因此该规则只能被此规则之后的规则覆盖，同样使用 !important。

好的，这有效，解决了我的问题，对吧？

虽然现在这解决了你的问题，但这种做法并不好，而且会让你很难维护 CSS。

如果你在所有东西上使用它，你只是在杀死 CSS(级联样式表)的 C，你将只需要依赖规则命令，并且有时您将无法编写所需的规则。

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