CSS中a:link、a:visited、a:hover、a:active 的顺序问题

链接的四种状态

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

实例

a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */

问题

今天在写CSS的时候，突然发现代码失效了，本来应该是鼠标经过时有下划线，其他情况下没有，但是实际上是没有任何变化。代码是从另一个显示正常的网页上拷下来的，于是我不不由得陷入了阵阵的忧伤。作为一个程序员，最怕的就是碰到明明很对但实际不行的错误。

解决方案

检查了好几遍，我发现唯一的差别在于，两段CSS代码中a:link a:hover 的定义顺序不同，难道是顺序导致的？于是改了一下代码，竟然显示正常了。但是这不正常啊，一个属性的位置怎么会影响它的效果呢？

原因

上网查了查，在wscschool上看到这么一句话：
当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

可是，为什么呢？

刨根问底

查了查，大致找到了原因。

浏览器是按照就近原则来解释的，也就是从下到上。
在我遇到的问题中，一个未被访问过的a标签在鼠标经过时同时具有link,hover 两个属性，而如果link标签在后面，那么就仍然显示link的效果，忽略hover。同理，如果hover 在 visisted 前，那么hover仍然会被忽略。

原因找到了，那就记下来，以后碰到同样问题就不会再乱找一通啦。

后记

我们不懂的东西还有很多。

最后再强调一下顺序：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

巧记

一个老外总结了便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。即a:link、a:visited、a:hover、a:active