超链接的伪类及如何清除缓存

超链接的伪类及如何清除缓存

超链接的伪类:

  • a:link ——未访问状态
  • a:visited——已访问状态
  • a:hover——鼠标悬停状态
  • a:active——鼠标激活(点击)状态

前方高能请注意:

  1. 四个状态同时存在时,有先后顺序: a:link→a:visited→a:hover→a:active

  2. 除a:visited外其他超链接伪类任意属性都能设置,但是a:visited只能设置字体颜色属性(color),此处您是否有很多问号,why?请继续往下看↓

关于a:visited只能设置字体颜色属性这个问题我反复测试了很久,然后还问了老师,老师
只是说我设置的属性太多了,全部去掉只留字体颜色属性就可以了,但是依旧没有解答我的
根本问题,然后便自己百度了一波,发现很多人也遇到这样的困惑,最终找到一篇,他(她)
是通过webkit关于a:visited的文字来解释了这个问题,大致意思就是:“a:visited伪类可
能会暴露用户浏览信息记录,攻击者可能会据此判断用户曾经访问过的网站,造成不必要的损
失,因此这些浏览器决定限制a:visited的功能,所以不是代码的问题,而是浏览器方面的限
制。”
参考作者文章链接:https://www.cnblogs.com/phoenixee/p/5960917.html

关于清除缓存:
当我们给超链接设置伪类的时候我们还会发现一个问题,就是当我们设置完a:link(未访问状态)的字体颜色,及a:visited(已访问状态)的字体颜色之后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问过的链接颜色 */
        a:link{
            color: blue;
        }
        /* 已经访问过的链接的颜色 */
        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">好好学习,天天向上!奥利给!</a>
</body>
</html>

运行:

  • 未访问超链接前:

超链接的伪类及如何清除缓存

  • 点击访问超链接后:

超链接的伪类及如何清除缓存

  • 刷新(依旧是已经访问过的超链接颜色):

超链接的伪类及如何清除缓存
那么问题来了,刷新后,按照正常逻辑应该显示设置的未访问链接的颜色,但是这个时候我们会发现,依旧是已访问链接颜色,why?因为浏览器缓存问题,清除缓存,就可以显示设置的未访问链接的字体颜色啦~

那么问题又来了,如何清除缓存?

第一步:
超链接的伪类及如何清除缓存
第二步:
超链接的伪类及如何清除缓存
第三步:
超链接的伪类及如何清除缓存
第四步:
超链接的伪类及如何清除缓存
再次刷新就是未访问状态超链接颜色啦~您学会了吗,赶紧试试吧!超链接的伪类及如何清除缓存

匿名

发表评论

匿名网友