CSS refuse to obey
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.cssbody
{
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.
加载中,请稍侯......
精彩评论