强调访问过的链接

时间:2012-05-06 15:55:47

标签: html css browser

给出以下示例:http://jsfiddle.net/A8v9x/4/ - 当您单击第一个链接然后返回页面时,第一个链接变为绿色。但是,即使访问过的链接声明为text-decoration:underline;,它仍然没有下划线。 即使您将!important添加到该规则,也不会发生任何变化。

在CSS规范中找不到有关此类行为的任何信息。这是一个常见的浏览器错误吗?如何解决这个问题?

2 个答案:

答案 0 :(得分:15)

您无法在:visited中更改文字装饰。这是出于https://developer.mozilla.org/en/CSS/Privacy_and_the_:visited_selector讨论的隐私问题。基本上更改计算属性可以允许网站确定用户访问过哪些网站。

可用于设置访问过的链接样式的CSS属性是颜色,背景颜色,边框 - * - 颜色,轮廓颜色和列规则颜色,当未访问和访问的样式都是颜色时(不是绘制服务器或无),填充和描边属性。对于不允许的属性(以及对于允许的属性的alpha组件,当使用rgba()或hsla()颜色或透明时),将使用未访问链接的样式。

答案 1 :(得分:1)

昨天我遇到了同样的问题,我找到了一个解决方法。在过去,我曾经使用下划线和访问链接的链接,更简单的访问者不要再点击相同的链接两次。

昨天我在尝试做同样的事情并且没有工作时感到惊讶。我失去了30分钟,直到我在互联网上发现,自2007年以来,由于安全原因,所有浏览器限制了您可以“访问”的属性。他们只有6-7个属性,你可以设置为“访问”。 其中一个是边框颜色。然后我想将下划线设置为无,并且使用“border-bottom-color”作为下划线。 你不能设置“border-bottom-color:transparent;”对于已访问,但您可以将border-color设置为与父元素background-color 相同的颜色。一旦链接被访问,这将使下划线不可见。

<style type="text/css">
body{color:black;background-color:white;}
a:link{color:blue;text-decoration:none;border-bottom: 1px solid;border-bottom-color:blue;}
a:visited{color:red;border-bottom-color:white;}
</style>

或者您可以通过将链接边框颜色设置为与背景相同的颜色以及访问的不同颜色来反向(您要问的是)。

演示反向:https://jsfiddle.net/stfr9f9a