a标签的属性问题！:link不起作用！怎么回事！

最新推荐文章于 2023-07-29 11:08:35 发布

梁同学与Android

最新推荐文章于 2023-07-29 11:08:35 发布

阅读量8.9k

点赞数 31

分类专栏： H5 文章标签： a标签 link link不起作用

本文链接：https://blog.csdn.net/qq_43290288/article/details/102666468

版权

H5 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

最近在学习h5:伪类选择器,发现一个问题

在使用a标签的时候，4个状态设定颜色，:link总是不显示，或者被:visited所替代；
如：
a:link{color: red;}
a:visited{color: green;}
a:hover{color:yellow;}
a:active{color:gray;}
但是我显示出来是绿色，:link并没有起作用，就算把:visited删掉，:link也没有作用！

在网上查有人说是按照lvha的顺序，但是这个只是为了让hover和active属性起作用而设置的，对于link无作用

具体的原因如下：
只有将应用发布才能看到a:link的效果。如果直接在文件系统中，不会反应a:link

什么意思呢，拿新浪的链接来说，就是在你的浏览器上只要点击过新浪的链接那一刻起，就已经将记录注入到浏览器的缓存中了，所以说，是已经被访问过的链接了，即使链接是之前浏览的，代码是后来写的，在这个浏览器打开link还是不会起作用

如果想让link起作用，就要将浏览器的缓存清除，你可以拿一个新的链接做例子，我这里拿新浪的链接演示一下：

代码实例：

在这里插入图片描述
您要想自己测试的话复制下面的就好了

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <style type="text/css">
	a:link{color:red}
	a:visited {color:yellow}
	a:hover{color:gray}
	a:active{color:blue}
 </style>
 <body>
  伪类选择器的练习:<br>
  注释：在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！<br>
  注释：在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！<br>
  <a href="https://www.sina.com.cn/">新浪</a>
 </body>
</html>

浏览器效果:

在这里插入图片描述
现在链接显示的是黄色，是因为我之前访问过了，所以下面清除一下最近一个小时浏览器的缓存

不同浏览器清除数据的方式不同，你也可以把所有的数据都清除，我这里就选择了一个小时的
清除之后，再次打开链接看一下效果
在这里插入图片描述
新浪的链接变成红色了

你懂了吗？不懂的话，在下方留言，小编会尽力帮你讲解的
如果帮到你了，记得点赞哦！

梁同学与Android

关注

31
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
19
评论
a标签的属性问题！:link不起作用！怎么回事！

最近在学习h5:伪类选择器,发现一个问题在使用a标签的时候，4个状态设定颜色，:link总是不显示，或者被:visited所替代；如：a:link{color: red;}a:visited{color: green;}a:hover{color:yellow;}a:active{color:gray;}但是我显示出来是绿色，:link并没有起作用，就算把:visited删掉，:li...
复制链接

扫一扫