【分享】关于a标签的4个伪类

    a:link{color:#f30;}
    a:visited{color:#000;}
    a:hover{color:#fff;}
    a:active{color:#f99;}

 

上面是a元素4个伪类的正确顺序，简称 lvha(love-ha)。

为什么这样才是正确的？　　

首先4个伪类的特殊性（应用优先级）是同样的，CSS有一条规则“后出现的样式会覆盖前面的样式”，伪类同样适用这条原则，

所以当两个伪类同时作用于同一个元素的时候，相同的CSS属性就覆盖了。

比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色

如果把visited放在hover的后面，那么已经访问过的链接始终触发visited伪类，根据第一条会覆盖hover里面的颜色。

最后 link visited 这两个伪类可以交换位置，因为他们不会同时出现

-----------------分割线

一个测试页面：https://github.com/jun-lu/layout/blob/dev/csshtml/lvha.html 在GITHUB上的一个测试页面。

以上内容是自己最近看《css权威指南》 第3章后得出的结。如有不对还请指正。