传智博客
快捷导航
蚂蚁部落
查看: 14329|回复: 0

a:link、a:visited、a:hover、a:active的用法

[复制链接]
发表于 2012-11-28 08:20:45 | 显示全部楼层 |阅读模式
a:link、a:visited、a:hover、a:active的用法:
在网页设计中,设计美观的超链接效果可以增强网站的用户体验,可能会给浏览者留下良好的印象,从而带来不少的回头客。所以
a:linka:visiteda:hovera:active的熟练使用显得至关重要。如果使用不够熟练,甚至还可能造成貌似正确却又难以理解的错误链接效果。以上几个是链接伪类选择器,下面来简单介绍一下各个选择器,当然也可以点击相应链接了解详细介绍。
一.a:link:
用来定义超链接被访问前的样式。
二.a:visited:
用来定义链接被访问后的样式。
三.a:hover:
用来定义鼠标放到链接上,但鼠标键未被按下时的样式。
四.a:active:
用来定义鼠标放到连接上,并被按下时的样式。
排列顺数很重要:
有些朋友可能会奇怪,既然几个链接伪类的各自用法都介绍了,只要在样式表中定义想要的样式既可以了,难道顺序还有特别的规定吗。事实上就是这样,如果顺序不正确的话,可能得不到我们想要的效果,下面看一个实例:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS中a:link、a:visited、a:hover、a:active的用法-蚂蚁部落</title>
<style type="text/css">
a:link{color:black;}
a:hover{color:blue;}
a:active{color:green;}
a:visited{color:red;}
</style>
<body>
  <div><a href="#">蚂蚁部落欢迎您</a></div>
</body>
</html>

以上代码中的链接,在没有点击之前,a:hover和a:active所设定的效果都是有效的,但是当链接被点击之后,这两个效果都没有了效果,只会显示a:visited所定义的效果。
现象原因:
大家知道最后声明的CSS代码效果要覆盖先前声明的代码的效果。例如:
[HTML] 纯文本查看 复制代码运行代码
<style type="text/css">
div{
  font-size:12px;
}
div{
  font-size:16px;
}
</style>
</head>
<body>
<div>蚂蚁部落</div>
</body>
在以上代码中字体的大小是16px,最后声明的代码优先级要高。第一个实例中所出现的问题也是优先级问题导致的,尽管每一个伪类看起来类似于一个不同的选择器,其实它们都是对链接的不同状态的样式的定义,可以认为它们是相同的选择器,是可以相互覆盖,也就是说这几个伪类之间也是遵循上面所说的优先级原则的。那么我们就非常容易理解第一个实例中问题的了,因为链接被点击之后 a:visited所声明的样式就会生效,当把鼠标放到链接之上或者当鼠标指针在链接智商并且按下鼠标键的时候a:hover或者a:active所声明的样式会被a:visited所覆盖。
正确的顺序:
为了正确的显示链接样式效果,我们可以遵循这样的原则,只要a:visited位于a:hover和a:active之前就可以实现正确的效果,但是有时候我们还是需要遵循以下一个大家共识的顺序:a:link、a:visited、 a:hover、 a:active,因为有些浏览器对a:hover的支持并不好。可能大家对顺序记忆起来比较难,那就看它们的首字母:LVHA,可以翻译成LV(著名品牌)哈!
那么按照以上原则对第一个实例进行修改:

[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS中a:link、a:visited、a:hover、a:active的用法-蚂蚁部落</title>
<style type="text/css">
a:link{color:black;}
a:visited{color:red;}
a:hover{color:blue;}
a:active{color:green;}
</style>
<body>
<div><a href="#">蚂蚁部落欢迎您</a></div>
</body>
</html>

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:14 , Processed in 0.086620 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表