Question

为什么链接的以下样式不起作用？

<html>
<head>
<style type="text/css">
    a:link {color:#123456;}    /* unvisited link */
</style>
</head>

<body>
    <a href="http://www.google.com">Visit Google</a>
</body>
</html>

谢谢！

Answer 1

对于一些常规最佳实践，链接样式层次结构的工作方式如下：

a:link {
color: #ff0000;
}
a:visited {
color: #ff0000;
}
a:hover {
color: #cccccc;
}
a:focus {
color: #cccccc;
}
a:active {
color: #cccccc;
}

最好始终应用所有这些，无论你是单独使用它们还是像这样：

a:link, a:visited {
color: #ff0000;
}
a:hover, a:focus, a:active {
color: #cccccc;
}

但不管怎样，顺序非常重要，如果没有遵循则可以覆盖。

Answer 2

这是因为链接已被访问过。

尝试

a {color: blue;} /* unvisited link */
a:visited {color: orange;} /* visited link*/

如果删除最后一个声明链接将为蓝色，无论:visited。

Answer 3

你不应该依赖它在未来工作：

http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/

在CSS中链接样式

3 个答案: