解释

Question

我有一个使用jQuery添加类（3a494c9da73d redis "docker-entrypoint.sh" 10 seconds ago Up 9 seconds 0.0.0.0:6379->6379/tcp）的代码。该课程已应用，但该课程的某些风格不起作用：

.class2

$('.item1').addClass('class2');

Answer 1

这是因为.item1已经有background-color并覆盖新类background-color添加的新.class2，因此您可以尝试使规则更加具体，如：< / p>

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

希望这有帮助。

Answer 2

问题不在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将使你的规则具有最高的特异性，例如＆＃34;无限＆＃34;特异性。

因此规则只能在此规则之后覆盖规则，也可以使用！important。

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

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

如果你在所有事情上都使用它，那么你就是要杀死C CSS（层叠样式表），你只需要依赖规则命令，有时你就不会能够编写你想要的规则。

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

Answer 3

您的代码正在为我工作（见下文）。如果您的样式被其他规则覆盖，请检查您的开发者控制台。在这种情况下，请使用更高的特定性，例如.item1.class2覆盖已设置的背景颜色。

!important不是解决方案，但最好是解决方法（这是一种不好的做法）。尝试组织规则以获得正确的顺序。

＆＃13;

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

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Answer 4

如果加载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 */
}

javascript jquery

jquery中的addClass并不像我想的那样工作

4 个答案:

解释

解决方案

为什么不重要？