Question

我有这个jquery问题让我抓狂。我想addClass到每个列表项。虽然列表项的宽度和高度确实增加，但背景和颜色不会改变。为什么？谢谢。

Jquery的：

<script>
    $(document).ready(function(){
        $(".userarea_nav li").each(function(){
        $(this).addClass("selected");
        });
    });
</script>

CSS：

.selected{
    background: blue;
    color: yellow;
    height: 200px;
    width: 100px;
}

Answer 1

如果您已经拥有li

的CSS背景，请尝试！重要

.selected{
    background: blue !important;
    color: yellow;
    height: 200px;
    width: 100px;
}

DEMO without important

DEMO with important

Answer 2

试试这个

CSS

.selected{
    background-color: Green!important;
    color: Yellow!important;
    height: 200px;
    width: 100px;
}

JS

$(document).ready(function(){
    $("userarea_nav li").each(function(){
    $(this).addClass("selected");
    });
});

Demo

Answer 3

使用Firefox，您可以使用Firebug扩展（http://getfirebug.com/）来检查DOM和css。使用Chrome和IExplorer 8+，您可以使用内置的检查工具。

您将能够找出实际应用于“选定”列表项的CSS规则。

检查列表项是否存在具有更高优先级的CSS规则。

规则的优先级可以通过以下方式确定：

规则的位置（在两个等效优先级规则之间，应用最后一个规则）
！important修饰符：它提升优先级
选择器：更具体的是选择器，更高的是优先级

Jquery addClass适用于宽度和高度，但不适用于背景和颜色

3 个答案: