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-class来解决这个问题，但是我的理解是浏览器没有这个的默认设置，所以除非你把它设置在其他地方而你需要取消它，它可能没必要。

注意：我似乎记得最近我发现只有.header a may also work，但老实说我不知道怎么做，我一直都明白以上是应该怎么做（尽管有腰带和吊带）。欢迎评论这一点。

修改

关于上述说明，我想我已经得到了答案：

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如果已在其他地方声明，则不会覆盖所有伪选择器。现在，如果没有声明任何其他内容，则appears to work覆盖浏览器的默认值，但这可能是误报。

Answer 2

这是浏览器为访问和未访问链接分配的默认颜色。如果您不想更改它，那么只需设置锚标签的样式。

.header a {
    color: black;
}

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

2 个答案: