为什么我不能改变主动导航元素的背景？

Question

我正在尝试将活动导航标签的背景颜色变为白色，而活动超链接文本应同时变为黑色。在这种情况下，“活动”表示用户所在的当前页面。

为此，我使用jquery添加一个.selected

类

$(document).ready(function () {
    $('.navbar a').each(function (index) {
        if (this.href.trim() == window.location) $(this).addClass("selected");
    });
});

目前没有.selected类的每个导航元素的css是：

.navbar a {
    color:#FFFFFF;
    padding:10px 10px 0 10px;
    margin-left:5px;
    margin-right:5px;
    background-color:#404040;
    border-radius: 10px 10px 0 0;
}

和.selected类的css是：

.selected {
    background-color: #FFFFFF;
    color:#404040;
}

但是，它不起作用。

这是我的jsfiddle。

http://jsfiddle.net/m9YfG/1/

Answer 1

为选择器添加更多权重/特异性：

.navbar a.selected { background-color: #FFFFFF; }

或者，添加!important指令：

.selected { background-color: #FFFFFF!important; }