欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 21:43:08
超链接的伪类及如何清除缓存超链接的伪类:a:link ——未访问状态a:visited——已访问状态a:hover——鼠标悬停状态a:active——鼠标激活(点击)状态前方高能请注意:四个状态同时存在时,有先后顺序: a:link→a:visited→a:hover→a:active除a:visited外其他超链接伪类任意属性都能设置,但是a:visited只能设置字体颜色属性(color),此处您是否发问,why?请继续往下看↓关于a:visited只能设置字体颜色属...

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

超链接的伪类:

  • 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?因为浏览器缓存问题,清除缓存,就可以显示设置的未访问链接的字体颜色啦~

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

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

本文地址:https://blog.csdn.net/qq_45587146/article/details/109556173