关于a标签各个伪类之间的权重关系整理（link visited hover active）

Web前端 CSS
Web前端
Publish Date:   2021-04-16
Update Date:   2021-06-19

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
            color: red;
        }

        a:visited{
            color: green;
        }

        a:hover{
            color: blue
        }

        a:active{
            color: yellow
        }
    </style>
</head>
<body>
    <a href="http://www.google.com">test</a>
</body>
</html>

结论

1 active权重最高，点击时会覆盖其他伪类，变为yellow

2 其次时hover，鼠标悬停时会覆盖覆盖visited和link

3 接下来是visited，会覆盖link

伪类之间遵循的覆盖顺序是 active -> hover -> visited -> link（精确的状态会覆盖宽泛的状态）

Author: Maple
Link: https://maplepudding.github.io/20210416/2021-4-16/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Maple !
Web前端 CSS
  TOC