购买服务 会员注册 会员登录
  设为首页 加入收藏 联系我们
Welcome to WebXml.com.cn
Web Services 网站建设 域名交易 服务支持 下载中心 信息资讯 联系我们 返回首页
 
服务支持 - 网站设计

样式表CSS中定义链接 A 的“爱恨原则”

www.WebXml.com.cn 发表日期:2010年07月10日 11:32 星期六
 

 

样式表CSS中定义链接 A 的顺序,可能会对大家有一些帮助:


A:link {
color: #000000;
TEXT-DECORATION: none
}
A:visited {
COLOR: #000000;
TEXT-DECORATION: none
}
A:hover {
COLOR: #ff7f24;
text-decoration: underline;
}
A:active {
COLOR: #ff7f24;
text-decoration: underline;
}



a :link、a:hover、a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。
我想,原因就在于浏览器解释CSS时遵循的“就近原则”。

举例来说:
我想让未访问链接颜色为蓝色,活动链接为绿色,已访问链接为红色:

第一种情况:我定义的顺序是a:visited、a:hover、a:link,这时会发现:把鼠标放到未访问过的蓝色链接上时,它并不变成绿色,只有放在已访问的红色链接上,链接才会变绿。
第二种情况:我把CSS定义顺序调整为:a:link、a:visited、a:hover,这时,无论你鼠标经过的链接有没有被访问过,它都会变成绿色啦。

这是因为,一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性,在第一种情况下,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义。
在第二种情况,无论链接有没有被访问过,它首先要检查是否符合a:hover的标准(即是否有鼠标经过它),满足,则变成绿色,不满足,则继续向上查找,一直找到满足条件的定义为止。

一句话:在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。
这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。
当然,如果故意打乱顺序,也会造成一些特殊的效果。比如,可以为链接制造出下划线颜色与文字颜色的差异。

老外总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。
再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .

 
 
 
关闭本窗口
 
请就此篇文章提供反馈:
很有帮助 没有帮助
9 8 7 6 5 4 3 2 1  
   
 
发表评论:
   
< 300中文字或< 600英文字符
 
WebXml.com.cn 声明:
  WebXml.com.cn 和/或其各供应商对于为任何目的而在本服务器上发布的文件及有关图形所含信息的适用性(不包括在单独的书面协议项下 WebXml.com.cn 向您提供的任何服务),不作任何声明。所有该等文件及有关图形均 " 依样 " 提供,而不带任何性质的保证。也许这些文件已经过期,且 WebXml.com.cn 不承诺更新它们。WebXml.com.cn 和/或其各供应商特此声明,对所有与该等信息有关的保证和条件不负任何责任,该等保证和条件包括关于使用、销售、符合特定用途、所有权和非侵权的所有默示保证和条件。在任何情况下,在由于使用或运行本服务器上的信息所引起的或与该等使用或运行有关的诉讼中,WebXml.com.cn 和/或其各供应商就任何问题而造成的损失不负任何责任。
 
 
 
WEB 服务 网站建设 域名交易 服务支持 下载中心 信息资讯 联系我们 首 页
版权所有 © 2006 - 2014 上海思集信息科技有限公司 保留所有权利        本站声明 Search powered by Google
Powered Asp.net 2.0