好的,我有以下菜单:
<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类中添加什么来使链接不更改颜色。目前链接将是蓝色的,但一旦点击它就会变成紫色。我想让它一直说黑,点击与否。
答案 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;
}
Joerg在下面的评论中指出我省略:focus
的问题。我做了,并且出于某种原因,但我会注意到为什么,你可以考虑是否需要它:
.header a:focus {
color: white;
background: blue;
font-size: 2em;
}
转到该链接,点击右下角的页面白色部分,然后点击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;
}
.header a
如果已在其他地方声明,则不会覆盖所有伪选择器。现在,如果没有声明任何其他内容,则appears to work覆盖浏览器的默认值,但这可能是误报。
答案 1 :(得分:1)
这是浏览器为访问和未访问链接分配的默认颜色。如果您不想更改它,那么只需设置锚标签的样式。
.header a {
color: black;
}