Question

我有以下css：

#nav ul li {float: left; margin-right: 10px; }
#nav ul li a { display: block; color: #fff; width: 100px; line-height:35px; background: #15612e; padding-left:16px;}
#nav ul li a:hover { background-color: #ea8206;}

这可以按预期工作。我现在想做的是有这样一个类：

 a.active { background-color: #ea8206;}

我想分配给页面上选择的任何菜单项，但这不起作用。

我认为它与优先权有关，并尝试过各种组合：

#nav ul li a.active {background-color: #ea8206;}

我认为我正在努力与正确的组合。

HTML是：

       <div id="nav">
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Buy</a></li>
                <li><a href="#">Sell</a></li>
                <li><a href="#">Search</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

有人能指出我正确的方向吗？

非常感谢

Answer 1

这是一个小提琴：http://jsfiddle.net/moonspace/aKLUS/

这完全是关于特异性...... 由于您已经在CSS中引用了'a'类，但以'#nav ul'为前缀，这些将覆盖一个简单的'a.active'定义。所以，在a.active之前添加'#nav ul'（根据小提琴），它会起作用。。

#nav ul li a { display: block; color: #fff; width: 100px; line-height:35px; background: #15612e; padding-left:16px;}
#nav ul li a:hover { background-color: #ea8206;}
#nav ul li a.active{ background-color: red; }

更有用的内容：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

CSS悬停菜单显示活动菜单项

1 个答案: