a:visited 背景图片无法显示?

新手上路,请多包涵

7e147bf0f736afc341c633f4bb19ebc4b6451237.jpg
./img/visited.gif图

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>css链接</title>
<style type="text/css">
* {padding: 0;margin: 0;}
body { font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif; font-size: 1em; } 
/* visited links ================================== */ 
ul { list-style:none; } 
li { margin: 5px 0; } 
li a { display: block; width: 300px; height: 30px; line-height: 30px; color: #000; text-decoration: none;  text-indent: 10px; background: #94B8E9 url(./img/visited.gif) no-repeat left top;} 
li a:visited { background: #94B8E9 url(./img/visited.gif) no-repeat right top;}  </style> 
</head> 
<body> 
    <ul> 
        <li><a href="#">Andy Budd's Blogography</a></li> 
        <li><a href="#">Stuff and Nonsense</a></li> 
        <li><a href="#">Hicks Design</a></li>
        <li><a href="#">Clagnut</a></li> 
        <li><a href="dog.com/">HTML Dog</a></li> 
        <li><a href="#">Adactio</a></li> 
        <li><a href="#">All In The Head</a></li> 
        <li><a href="#">Mark Boulton</a></li> 
        <li><a href="#">Ian Lloyd</a></li> 
    </ul> 
</body>
</html>

1473516053_430253.jpg效果图
为什么a:visited 背景图片无法显示? li a:visited { background: #94B8E9 url(./img/visited.gif) no-repeat right top;}

阅读 3.6k
3 个回答

额,你这个是想做选中效果么? 如果是选中效果想长时间记录用户的选择项其实还是通过log表做选择日志记录用户的操作,然后通过后端返回选项,用后端配合jquery来实现应该会比较实际。
单纯通过CSS实现好像无法很完好的实现这种效果,不过不是很懂你的具体需求只是给个建议。
上述的问题可以看看是不是图片定位的问题或者图片是否存在。《CSS教程》 可以参考一下这本教程

要想实现这个效果,首先a标签里面的内容不能都是#,至少应该是#1,#2,#3这样的,不然会全部受到影响。记得之前用border做这种效果,background倒没试过,不过感觉应该差不多

按楼主的代码自测,chrome浏览器 V48.2593
结果:
a:link,a:hover ,a:active 都能应用背景图片改变
但是a:visited不能应用背景图片改变,

~错误~(其他的字体颜色、字体大小、文字修饰都可以生效)~错误~

目前自测除了color可自由应用,背景色需要a{}里面设置,才可覆盖。其他属性无法应用

原因暂未找到

据说~
IE7+、Firefox、Chrome浏览器,也就是说IE6之后的浏览器,都不再支持a:visited的粗细color颜色之类属性,即访问后变粗变细的font-weight设定。
据说是因为隐私问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题