有时候我们同时设置了a:visited和a:hover的样式,但一旦超链接访问后,hover的样式就不再出现了, 这是怎么回事呢?
这是因为将a:visited和a:hover的顺序放错了。代码清单如图所示:
下面是不正确的顺序
- <style type="text/css">
- a:hover{color:yellow;}
- a:visited{color:red;}
- </style>
- <a href="#">就是显示不出来!</a>
正确的顺序
- <style type="text/css">
- a:visited{color:red;}
- a:hover{color:yellow;}
- </style>
- <a href="#">就是显示不出来!</a>
这样,不管a标签是否被点击过,鼠标划过时都会显示×××。
a标签的四种状态的排序问题,有个简单好记的原则,叫做love hate原则:
l(link)ov(visited)e h(hover)a(active)te