Question

元素之前：

<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>

'。current'Css：

#tabs li.current, #tabs li:hover {
    background-color: #e5e5e5;
    border-color: #e5e5e5;
}

在此代码之后：

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

和css：

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

'dark-tab'成功添加，但无法覆盖backgournd颜色。对于目前的情况，我必须使用jquery来添加这个css。任何解决方案都将受到高度赞赏

Answer 1

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

您可以将guard('user')的CSS选择器更改为.dark-tab以匹配先前规则的特异性，或者您可以使用#tabs li.dark-tab覆盖之前规则的特异性，例如

!important

Answer 2

您已添加它，但最初的CSS会覆盖它。使用其中一个：

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

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

更多信息here

更新

在看到您的评论后，您可以使用.css()功能设置将覆盖没有!important的所有属性的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();

Answer 3

需要一个精确的定义：

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

如果您不必，请不要使用！重要的CSS代码。

在addClass（）

3 个答案:

更新