javascript - CSS 颜色属性不起作用

Question

当链接的类发生变化时，我在更改链接的颜色属性时遇到了一些麻烦。这是代码

<div id="information">
    <ul class="pagination">
        <li><a href="#"><span>Administration</span><small>Learn Site Administration</small></a></li>
        <li><a href="#"><span>Management</span><small>Learn Access Management</small></a></li>
        <li><a href="#"><span>Dashboard</span><small>Learn Dashboard Functions</small></a></li>
        <li><a href="#"><span>Visitors</span><small>Learn Visitor Management</small></a></li>                        
    </ul>
</div>

这是我用来创建没有内联样式或其他任何内容的列表的 html 代码。

现在这是我的 CSS。

#information {
width: 1000px;
height: 350px;
margin: 0 auto;
background:url(../images/information-bg.jpg) no-repeat 25px 5px;
}
#information ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#information ul.pagination{
    float: left;
    list-style:none;
    padding:0;
    margin:0;
    width:246px;
    height:350px;
    background:url(../images/pagination-bg.jpg) no-repeat left top;
}
#information ul.pagination li {
    padding:5px 0 0 5px;
    margin-bottom:-5px;
}
#information ul.pagination li a {
    width:270px;
    height:85px;
    background-repeat:no-repeat;
    background-position:left -85px;
    background-image:url(../images/thumb-sprite.png);
    text-decoration:none;
    display:block;
    color: #464646;
}
#information ul.pagination li.current a {
    background-position:left top;
    color: white;
}
#information ul.pagination li a span {
    font-size: 26px;
    line-height: 1.2em;
    display: block;
    padding: 14px 0 0 0;
}
#information ul.pagination li a small {
    display:inline-block;
    color:#428301;
    background-repeat:no-repeat;
    background-position:right -80px;
    background-image:url(../images/arrows.gif);
    padding:0 17px 0 0;
    font-size: 10px;
}
#information ul.pagination li.current a small {
    font-size: 10px;
    color: #89C100;
    background-position:right 5px;
}
#information ul.pagination li a span, #information ul.pagination li a small {
    padding-left:40px;
}

目前没有元素有类 .current 所以我通过脚本将类添加到第一个元素，这是脚本

$("document").ready(function(){

    //Adding class to pagination and showing first image
    var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
    var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);    


    //On click of pagination link, changing background of pagination and anmating new slide
    $("ul.pagination li").click(function (){           
        currentPagination.removeClass("current");        
        currentPagination = $(this).addClass("current");              
        var ul = $(this).parent();
        var index = ul.children().index(this);
    });

});

这里的难题是，class = current 的 li 的背景正在正确改变，但元素的颜色属性没有改变，您可以在 ( #information ul.pagination li 的 css 属性中看到.current a )，我不知道它有什么问题，但我被困了这么久，最后我决定去论坛问问。

请注意脚本运行良好，因为背景正在完美改变。即使在当前类(class)的网页 li 的开头有颜色 #fff 但之后它不起作用，任何帮助将不胜感激。

P.S 这是 URL，您可以在其中看到它在开始时工作正常，但之后背景图像位置发生变化但颜色没有变化

Answer 1

它运行良好。正如你在 JSFiddle 中看到的 http://jsfiddle.net/banded_krait/m9kV9/1/

如果它在您的代码中仍然不起作用，请尝试将 !important 放入该 css。

#information ul.pagination li.current a {
    background-position:left top;
    color: red !important;
}

为字幕颜色放这个css

#information ul.pagination li.current a small {
    color: red !important;
}

我还更新了我的 jsfiddle。请参见。我将颜色从白色更改为红色以查看它是否正常工作。