html - CSS 悬停菜单显示事件菜单项

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

这按预期工作。我现在想做的是开设这样的类(class):

 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

这是一个 fiddle :http://jsfiddle.net/moonspace/aKLUS/

这都是关于特异性...因为您已经在 CSS 中引用了“a”类，但在它们前面加上了“#nav ul”，它们将覆盖一个简单的“a.active”定义。因此，在 a.active 之前添加“#nav ul”(按照 fiddle )，它就会起作用。 . .

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