Question

我会简短地说，我得到了这个网页：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="Stylesheet" type="text/css" href="css/style.css" />
    <link rel="Stylesheet" type="text/css" href="css/nav.css" />
</head>
<body>
    <div id="header">
        <ul id="navList">
            <li><a href="#" id="navActive">foo</a></li>
            <li><a href="#">bar</a></li>
       </ul>
    </div>
</body>
</html>

有了这个CSS
的style.css

body
{
    padding:0;
    margin:0;
    background-color:#000000;
    background-repeat:no-repeat;
    background-image:url('../img/bg.jpg');
}

nav.css

#navList
{
    padding:0;
    margin:0;
    background-image:url('../img/menu.png');
    list-style-type:none;
    padding:12px 150px;
}

#navList li
{
    display:inline;
}

#navList li a
{
    color:#bfbfbf;
    padding:14px 25px;
    text-decoration:none;
}

#navList li a:hover
{
    color:#000000;
    background-color:#bfbfbf;
    text-decoration:none;
}

#navActive
{
    color:#000000;
    background-color:#bfbfbf;
}

看起来navActive id中的CSS永远不会被应用...有人可以告诉我为什么和/或建议我纠正这个问题。

感谢。

Answer 1

这是因为选择器

#navList li a

比

更重要

#navActive

因为它更具体。

您可以通过添加

来克服它

color:#000000 !important;

或使用

#navList li a#navActive

作为选择器

Answer 2

试试这个：

#navActive
{
    color:#000000 !important;
    background-color:#bfbfbf;
}

Here's a demo。这是一场特异性战斗，在这种情况下，原始的#navList li a正在赢得胜利。另一种方法是使用#navList li a#navActive而不使用!important。

CSS拒绝服从

2 个答案: