逍遥游

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

链接的四种状态:

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

实例:

1
2
3
4
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


多说停止服务,disqus引导注册太过分,暂时不上评论系统了。有机会自己造轮子吧。邮箱:input@newnius.com