<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>visited问题</title>
<style>
a:link{color:red}
a:visited{color:blue}
a:hover{color:yellow}
a:active{color:pink}
</style>
</head>
<body>
<a href="/.test.html" target="_blank">visited问题</a>
</body>
</html>
在浏览器中访问这个代码时,会发现visited是不起作用的,这是因为链接无效会使a的visited设置无效, 这是因为链接点击后没有产生网页访问的历史记录, 所以链接点击后无效
另外, 伪类的书写顺序也是固定的这一点需要谨记CSS代码如下:
a:link{color: red;} a:visited{color: blue;} a:hover{color: green;} a:active{color: purple;}
html代码如下:
<ul> <li><a href="#">锄禾日当午</a></li> <li><a href="#">汗滴禾下土</a></li> <li><a href="#">谁知盘中餐</a></li> <li><a href="#">粒粒皆辛苦</a></li> </ul>
然后在网页刚打开时, 文字显示效果如下:
按说在链接没有被点击的时候文字应该是红色的, 然而这里显示的确实蓝色.
对html代码修改如下:
<ul> <li><a href="https://wwww.baidu.com">锄禾日当午</a></li> <li><a href="#">汗滴禾下土</a></li> <li><a href="#">谁知盘中餐</a></li> <li><a href="#">粒粒皆辛苦</a></li> </ul>
这次发现第一行文字的显示效果是预期的样式, 出现link与visited冲突的原因是a标签的链接有问题, 简单试过各种链接之后,
发现之后链接为空或者只是一个'#'时会出现这种情况, 至于还有没有别的方式触发这个问题就不知道了