css - 将 a:visited 链接设置为与 a:link 和 a:hover 相同的状态

Question

我正在研究我的 a:link 有一个状态（蓝色，没有下划线等），而 aa:hover 是白色的。我希望我访问的链接具有与a:link和相同的状态a:hover。这可能吗？最常见的浏览器支持？

score 15 · Accepted Answer

a, a:link, a:hover, a:visited, a:active {text-decoration: none; color: blue;}

应该适用于所有支持 CSS 的浏览器，尽管这是一个坏主意（目前离线，谷歌缓存）

要制作a:hover白色，请将其从上述规则中删除并为其创建特殊规则或仅添加：

a:hover {color: white !important;}

score 11 · Accepted Answer

正如 sblundy 指出的那样，这是完全有可能的。但是，如果您制定这样的规则，将不再有任何视觉提示用户将鼠标悬停在先前访问过的链接上。

另外，请记住按以下顺序指定规则：

a:link { }
a:visited { }
a:hover { }
a:active { }

否则你可能会得到意想不到的结果，因为所有这些规则都具有相同的特异性。顺序很重要。

编辑：CSS2 允许将伪类链接在一起。这可用于解决您的请求造成的 [潜在] 可用性问题。

a:visited:hover { }

但是，我不知道这个约定是否得到广泛支持。

score 5 · Accepted Answer

教我记住放置 CSS 链接的顺序的助记符是“LoVe HAte”：链接、访问、悬停、活动。

坚持 :focus 在那里通常也不是一个坏主意。

当然，如果您通过使用逗号列出选择器来使链接的所有状态看起来都相同，那么顺序无关紧要。

score 1 · Accepted Answer

以下是您如何设置 a 标签（正常和已访问）和单独设置悬停样式的方法。

a
{
    color:#6c7492;
    font-weight:bold;
    text-decoration:none;
}
a:hover
{
    border-bottom:1px solid #6c7492;
}

score 1 · Accepted Answer

1

如果您使用了那些伪类，我不明白为什么不这样做。

a:visited, a:hover {
  ...
}

于 2008-11-19T21:34:28.727 回答

5 回答 5