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

程序员文章站 2022-06-28 18:54:14

超链接的伪类及如何清除缓存超链接的伪类：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——鼠标激活（点击）状态

前方高能请注意：

四个状态同时存在时，有先后顺序： 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>

运行：