我的网站有一些链接样式,CSS如下:
a:link { font-family: Verdana, Tahoma, Geneva, sans-serif; text-decoration: none; color: #0676b3; } a:visited { color: #666; text-decoration: underline; } a:hover { color: #fff; background: #A5C2DB; border-radius: .1875em; padding: 0 .1875em; }
这里是一个的jsfiddle展示他们是如何 应该 在各自不同的状态看:
a { display: inline-block; margin: 10px; } /* these styles are for presentation of the link states they are NOT the styles in my stylesheet*/ a.link { font-family: Verdana, Tahoma, Geneva, sans-serif; font-size: .875em; text-decoration: none; color: #0676b3; } a.visited { color: #666; text-decoration: underline; } a.hover { color: #fff; background: #A5C2DB; border-radius: 0.1875em; padding: 0 0.1875em; } <a class="link">Regular Link</a> <br /> <a class="visited">Visited Link</a> <br /> <a class="hover">Hovered Link</a>
:link =蓝色文字没有装饰
:visited =灰色文字加下划线
:hover =浅蓝色背景的白色文本
在:link和:hover工作正常,但由于某些原因,:visited国拒绝显示下划线。在使用Firebug或检查器的Chrome和Firefox中,我可以看到实际的:visited样式,文本为灰色,只有它拒绝underline状态。
:link
:hover
:visited
underline
关于我在做什么错的任何想法吗?
您没有做错任何事情-只是这种方式不再起作用了。:visited的样式用作安全漏洞,因此浏览器制造商基本上消除了:visited的替代样式,除了少数几个属性(例如,“color”,“ background-color”)