0

我已经使用 CSS 为链接设置样式，如下例所示。

这在 Chrome 中按预期工作，但是使用 IE8 我遇到了这个问题：

当您第一次访问该页面时，所有链接都没有预期的下划线。

如果我将鼠标悬停在它们上面，它们会按预期加下划线。

如果然后访问该链接，则下划线会按预期消失，但是如果我再次将鼠标悬停在它们上，我将不再获得下划线。

有任何想法吗...？

谢谢

a:link {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}     
a:active {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}     
a:hover {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:underline !important;}  
a:visited {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
4

3 回答 3

1

尝试以正确的顺序列出不同的选择器。

a:hover必须紧随其后a:link，a:visited a:active必须紧随其后a:hover

此外，您不应该使用!important. 这可能会在以后给您带来问题。

源：http ://www.w3schools.com/css/css_link.asp

于 2013-10-02T13:44:52.363 回答
1

只需阅读 CSS 选择器的特殊性，然后重新排序样式规则：

http://www.w3.org/TR/css3-selectors/#specificity

并尽量避免，!important就像魔鬼避免十字架一样。

于 2013-10-02T13:46:19.453 回答
1

您的问题来自您的链接未按 LVHA 顺序设置样式这一事实。:link您应该先为它们设置样式，然后是:visited，然后是:hover，:active以获得一致的跨浏览器结果。

此外，任何应用于的样式:link都不需要重新应用于:visited、:hover，或者:active除非您想用不同的值覆盖它。例如，当您声明text-decoration:nonefor时:link，您不需要将其放在除 之外的任何其他定义中:hover，您希望将其覆盖为none。由于除此之外的所有样式:hover都相同，因此您可以在此处绕过 LVHA 顺序：

a:link, a:visited, a:active {
    color: #0064cc;
    font-family: Arial;
    font-size: 13px;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

希望这可以帮助！

编辑

尽管您的问题与您对 的使用无关!important，但通常最好避免使用它。它会导致一些非常非语义的 CSS。最好对 CSS 选择器的应用顺序有一个全面的了解（这并不像您想象的那么简单！）。查看 MDN 的文档以获取更多信息。

于 2013-10-02T13:44:14.167 回答