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

最新推荐文章于 2020-11-08 22:18:53 发布

是！豆哈哈

最新推荐文章于 2020-11-08 22:18:53 发布

阅读量3.1k

点赞数 4

分类专栏：前端超链接 html 文章标签： html css web

本文链接：https://blog.csdn.net/qq_45587146/article/details/109556173

版权

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

超链接

2 篇文章 0 订阅

订阅专栏

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

超链接的伪类：

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

前方高能请注意：

四个状态同时存在时，有先后顺序： a:link→a:visited→a:hover→a:active
除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?因为浏览器缓存问题，清除缓存，就可以显示设置的未访问链接的字体颜色啦~

那么问题又来了，如何清除缓存？

第一步：

第二步：

第三步：

第四步：

再次刷新就是未访问状态超链接颜色啦~您学会了吗，赶紧试试吧！

是！豆哈哈

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
12
评论
超链接的伪类及如何清除缓存

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

扫一扫