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

时间:2012-03-11 19:19:10

标签: css html

好的,我有以下菜单:

<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类中添加什么来使链接不更改颜色。目前链接将是蓝色的,但一旦点击它就会变成紫色。我想让它一直说黑,点击与否。

2 个答案:

答案 0 :(得分:5)

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

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覆盖浏览器的默认值,但这可能是误报。

答案 1 :(得分:1)

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

.header a {
    color: black;
}