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

Question

我有这个 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 背景，试试 !important

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

没有重要的DEMO

重要的演示

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");
    });
});

演示

Answer 3

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

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

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

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

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