单击时保持菜单项的颜色为静态

Question

好的,我有以下菜单:

<div class="header">
        <div id="logo"></div>
        <ul class="menu">
            <li><a href="/index.aspx">Home</a></li>
            <li><a href="/about.aspx">About</a></li>
            <li><a href="/contact.aspx">Contact</a></li>
        </ul>
    </div>

与此CSS类相关联:

.header {
    margin:20px 0 55px;
    height:68px;
    width:inherit;
}

我可以在菜单标签或CSS类中添加什么来使链接在单击时不改变颜色.目前链接将是蓝色的,但一旦点击它就会变成紫色.我想让它一直说黑,点击与否.

Answer 1

没有比引用规范更好的方法了:

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */
a:active  { color: gray }   /* when element accepts tab focus */

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

所以这应该涵盖所有情况:

.header a,
.header a:link,
.header a:visited,
.header a:active,
.header a:hover {
    color: black;
}

http://jsfiddle.net/ZgUZn/1/

Joerg在下面的评论中指出我省略的问题:focus.我做了,并且出于某种原因,但我会注意到为什么,你可以考虑是否需要它:

.header a:focus {
    color: white;
    background: blue;
    font-size: 2em;
}

http://jsfiddle.net/ZgUZn/5/

转到该链接,单击底部右侧四分之一页面的白色部分,然后TAB按键.您将看到当该元素获得焦点时,它会发生变化.你可以通过包含这个psuedo类来解决这个问题,但是我的理解是浏览器没有这个的默认设置,所以除非你把它设置在其他地方而你需要取消它,否则它可能是不必要的.

注意:我似乎记得在最近我的脑海中我发现它也.header a可能有用,但老实说我不知道​​怎么做,而且我一直都明白以上是应该怎么做的(腰带 - 和 -尽管有吊带).欢迎就这一点发表评论.

编辑

至于上面的说明,我想我得到了答案:

a,
a:link,
a:visited,
a:hover,
a:active {
    background: green;
    color: white;
    font-size: 2em;
}
.header a {
    color: black;
}

http://jsfiddle.net/ZgUZn/6/

.header a如果已在其他地方声明,则不会覆盖所有伪选择器.现在,如果没有其他声明,它似乎可以覆盖浏览器的默认值,但这可能是误报.