需要 a:hover 的 CSS 文本颜色优先于 a:visited答案

【问题标题】：Need CSS text color for a:hover to take precedence over a:visited需要 a:hover 的 CSS 文本颜色优先于 a:visited
【发布时间】：2009-08-26 16:45:38
【问题描述】：

我有一些 CSS 代码在悬停时显示背景颜色。文本是蓝底白字。

否则，如果没有悬停，则文本为蓝底白字。但是，当链接被访问时，文本保持蓝色，悬停时为蓝色背景。

如何强制悬停文本颜色优先？

a:link{
    color:#3399cc;
}

a:hover{
    background-color:#3399cc;
    color:#ffffff;
}
a:visited{
    color:#3399cc;
}
a:active{
    color:#3399cc;
}

【问题讨论】：

标签： css

【解决方案1】：

我认为为:hover 指定样式数据在:visited 的样式数据之后就足够了：

a:visited{  
    color:#3399cc;  
}  
a:hover{  
    background-color:#3399cc;  
    color:#ffffff;  
}

【讨论】：

有几个首字母缩写词可以记住链接属性的正确顺序 - 一个是 LoVe HAte - Link；参观过；徘徊;活跃

【解决方案2】：

请参阅 Eric Meyer 的关于该主题的文章：Ordering The Link States

建议使用“link-visited-hover-active”LVHA-rule，参考CSS规则中伪类的顺序。 cmets 会在排序时显示一些易于识别的首字母缩略词（将 :focus 添加到包中）：

Lord Vader 的 Former Handle，Anakin
Lord Vader Froze Hans Ass

【讨论】：

【解决方案3】：

如果我没记错的话，您只需切换顺序，将 :hover 类放在样式表中的 :visted 类之后

【讨论】：

【解决方案4】：

LoVeHAte = 链接、已访问、悬停、活动

【讨论】：

【解决方案5】：

一种方法是使用!important 关键字：

a:visited
{
    color:#3399cc;
}
a:hover
{
    background-color: #3399cc;
    color: #ffffff !important;
}

这将确保:hover 优先。

也可以用a:visited:hover 替换您的a:visited hover，这意味着<hover> 元素（不存在！）。

如前所述，更改样式的顺序应该是一个足够的解决方法：后面的定义优先于前面的定义。

【讨论】：

请不要！重要的黑客。这样的事情总有一种有效的方法。