CSS中A链接样式的 "爱恨"原则

老外总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。
定义A链接样式的正确的顺序：a:link、a:visited、a:hover、a:active .

为什么我们不能改变定义的顺序? 做下测试就可以了.

假设我们想实现下面的样式:

状态	样式	颜色
已访问	a:visited	红
未访问	a:link	蓝
选定	a:active	绿
鼠标移入	a:hover	黄

 

 

 

 

 

 

 

 

 

第一种方式:

鼠标移入时,并没有变黄.而是当这个链接已经被访问过后,鼠标移入才变黄

<style type="text/css">
a:visited{color:red;}
a:hover{ color:yellow;}
a:link{ color:blue;}
a:active{ color:green;}
</style>

 

　　这是因为,一个鼠标经过的未访问的链接同时拥有a:link,a:hover两种属性,在上述的CSS样式中,a:link离他最近,先满足a:link,而放弃a:hover的重复定义.

　　而使用LVHA顺序声明后,它首先检查a:hover的符合标准,先变色.
　　所以说,为了符合浏览器解释CSS遵循的"就近原则".我们在定义CSS中,宜将最一般的条件放在最上面,并依次向下,最下面放最特殊的.

 

在W3C规范中,也规定了链接的声明顺序:

1.在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

2.在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

传送门:http://www.w3school.com.cn/css/css_pseudo_classes.asp