Hyperlink Pseudo-Classes Definition and Order

Hyperlink Pseudo-Classes Definition and Order

Hyperlink pseudo-classes can be used to define styles at different stages of a mouse click.
The syntax is as follows:

a:link{...}
a:visited{...}
a:hover{...}
a:active{...}

When defining pseudo-classes, they must follow the order: link, visited, hover, active; otherwise, browsers may fail to display all four styles correctly.

::: normal-demo Hyperlink Styles Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        a{text-decoration:none;}
        a:link{color:yellow;}
        a:visited{color:purple;}
        a:hover{color:green;}
        a:active{color:blue;}
    </style>
</head>
<body>
<a href="https://www.supremepole.com" target="_blank">https://www.supremepole.com</a>
</body>
</html>

:::