CSS refuse to obey_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-24 02:50 出处：网络

I\'ll make this short, I got this webpage : <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head>

相关专题：css

I'll make this short, I got this webpage :

<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>

With this 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;
}

It looks like the CSS from the navActive id is never being applied... Could someone tell me why and/or suggest me a way to correct this.

Thanks.

It's because the selector

#navList li a

is more heavily weighted than

#navActive

as it is more specific.

You can overcome it by adding

color:#000000 !important;

or using

#navList li a#navActive

as the selector

Try this:

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

Here's a demo. It's a specificity fight, in this case the original #navList li a is winning. Another alternative is using #navList li a#navActive without the !important.

CSS refuse to obey

精彩评论

关注公众号

热门标签

图文推荐

CSS refuse to obey

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：