html中a标签点击状态失效（覆盖）——link,visited,hover,active的顺序

html中，​

​<a>​

​ 标签的点击事件有四个状态，分别是link、visited、hover、active，如果同时设置多个状态的显示且不按照一定状态的话，就会让一些效果被覆盖了。

下面放一段错误代码，先设置hover，再设置visited，会发现当鼠标移上去后a的颜色还是白色（#fff），而不是想要的#f0a986，即a的hover的样式被visited的覆盖了。

a:hover{
    color: #f0a986;
    text-decoration: none;
}

a:visited{
    color:#fff;
    text-decoration: none;
}      

正确的顺序应该是：

link→visited→hover→active      

​

​a:link​

​​：未访问时的样式，一般省略成a

​​

​a:visited​

​​：已经访问后的样式

​​

​a:hover​

​​：鼠标移上去时的样式

​​

​a:active​

​：鼠标按下时的样式