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.current a ) 的 css 属性中看到，我不知道有什么问题它，但我已经卡了这么久终于我决定问论坛。

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

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

Answer 1

试试

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

您的代码运行良好，问题是您使用的是color: white;

所以链接没有显示。

Answer 2

我没有看到任何错误here

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

});

Answer 3

在这个 DEMO

中运行良好

我已经添加了

#information ul.pagination li.current a {
    background-position:left top;
    background-color: black; 
    color: white;
}

这样很容易看到

更新答案 尝试通过指定以下属性来覆盖默认链接颜色

#information ul.pagination li.current a:active{ 
    color: #FFF;
}

Answer 4

它运行良好。正如您在 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。请参见。 我将颜色从白色更改为红色，看看它是否有效。