说明

同一个标签，根据其 不同的状态，有不同的样式，

应用场景

一般用于 超链接 样式，因为 超链接 的默认样式都比较难看

注意顺序

• a:hover 必须 a:link 和 a:visited 之后
• a:active 必须在 a:hover 之后

推荐顺序：a:link、a:visited、a:hover、a:active

设置链接样式

a{
    color:black;
    text-decoration:none
}

未访问的链接

a:link{
    color:gray;
    text-decoration:none
}

链接访问过

a:visited{
    color:red;
    text-decoration:none
}

鼠标放在超链接上

a:hover{
    color:green;
}

鼠标点击超链接时

a:active{
    color:blue;
}

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link{
            color:gray;
            text-decoration:none;/*不显示超链接下划线*/
        }

        a:visited{
            color:red;
        }

        a:hover{
            color:green;
        }

        a:active{
            color:blue;
        }
    </style>
</head>
<body>
    <a href="#2">百度</a>
</body>
</html>

原文出处：/show_1IX1G0v4gsie.html