a的visited不起作用问题

最新推荐文章于 2022-08-19 20:08:23 发布

nicexibeidage

最新推荐文章于 2022-08-19 20:08:23 发布

阅读量9.6k

点赞数 1

本文链接：https://blog.youkuaiyun.com/nicexibeidage/article/details/78427897

版权

<!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>
  
  然后在网页刚打开时, 文字显示效果如下:

  
  
   
   
   
   

   
   
    
    9074069B-4967-40BA-8249-DE1C0DA6D8EB.png
   
   
  
  
  
  按说在链接没有被点击的时候文字应该是红色的,  然而这里显示的确实蓝色.
  
  对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标签的链接有问题, 简单试过各种链接之后, 
  
  发现之后链接为空或者只是一个'#'时会出现这种情况, 至于还有没有别的方式触发这个问题就不知道了