Jquery 在addClass（）之后css重写不起作用

在元素之前：

<li id="tabs-abc" class="room current" data-name="abc" data-closed="false" role="tab" data-currenttheme="bright" data-cursor="pointer" style="visibility: visible; cursor: pointer;"></li>

在此代码之后：

this.tab.addClass('dark-tab').show();

和css：

.dark-tab {
    background-color: #C2C3C4;
}

“深色选项卡”已成功添加，但无法覆盖背景颜色。对于当前的情况，我必须使用jquery来添加这个css。

---

如果您添加了任何解决方案，我们都会非常感激，但最初的CSS会覆盖它。使用其中一种：

.dark-tab {
    background-color: #C2C3C4 !important;
}

#tabs li.current.dark-tab,
#tabs li.dark-tab:hover {
    background-color: #C2C3C4;
}

更多信息

更新 在看到您的注释后，您可以设置CSS样式，以覆盖所有没有

的属性！重要信息

，请使用该功能

此jQuery适用于您：

this.tab.css("background", "#C2C3C4").show();

如果需要其他样式（如边框），可以添加其他样式，如下所示：

this.tab.css({
              "background": "#C2C3C4",
              "border": "1px solid #000"
                                      }).show();

或作为一行：

this.tab.css({"background": "#C2C3C4", "border": "1px solid #000"}).show();

---

这是因为您以前的选择器具有更高的特异性

您可以将

.dark tab

的CSS选择器更改为

#tabs li.dark tab

以匹配上一个规则的特定性，也可以使用

！重要信息

覆盖以前规则的特殊性，如

.dark-tab {
  background-color: #C2C3C4 !important;
}

---

准确的定义是不够的：

    #tabs li.dark-tab, #tabs li.dark-tab.current {
        background-color: #C2C3C4;
    }

---

如果你没有必要，不要使用！重要的css代码。

Google“css专用性”以了解如何控制优先级。@Barmar对于这种情况，我必须使用jquery添加它。如何使用jquery应用css专用性？@Arnab您不会在jquery中更改专用性。您可以更改

.dark tab

的CSS规则的特殊性。如果您按照我的建议进行谷歌搜索，您将学会如何操作。前3行不需要使用“重要”。只需添加#tabs li.dark tab{…}一个精确的定义就足够了。@Chris Happy:这将动态完成。“我可以用jquery而不是硬编码的css来实现这一点吗？”安写道，“使用其中一个，而不是两个都使用。只需添加#tabs li.深色tab{…}一个精确的定义就足够了。如果不需要，请不要使用“重要”。在这种情况下，你不必这么做。@Arnab，请查看我之前的评论。@Ann:谢谢你，Ann。我会听从你的建议。但我想这次我需要'！重要提示，因为我需要使用jquery动态更改主题。@Arnab您测试过我的css代码吗？我想没有它也能工作！重要的。因为#tabs li.current.dark-tab的定义更强。我给了你一个答案，请查收。@Ann我还提供了父ID和元素名以增加特殊性-这是我的第一个建议。但也包括

！重要信息

作为另一个选项。两者都是有效的。OP可以在他们的应用程序中使用任何一个适合他们的。

    #tabs li.dark-tab, #tabs li.dark-tab.current {
        background-color: #C2C3C4;
    }