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：鼠标按下时的样式

---

欢迎大家加入QQ群一起交流讨论，「吟游」程序人生——YinyouPoet