注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

★柳暗花明★

似水年华,诠释着无力的永恒······

 
 
 

日志

 
 

a与a:link、a:visited、a:hover、a:active之间二三事  

2010-12-01 17:26:02|  分类: CSS经典 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

起因:

      今日做项目,至a与a:link的CSS代码处,忽觉茫茫然不知所以然:这a的CSS和a:link什么关系?貌似有些冲突啊?还有这a:link、 a:visited、a:hover、a:active伪类之间有没有相互制约和继承关系?于是百度,半日无果,遂索性自己探究。。。

过程:

      使用软件:Adobe Dreamweaver CS3 ,Internet Explorer8.0

须知:

       ①

在所有浏览器中,链接的默认外观是:

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的

      ②

在 CSS 定义中:
1. a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!
2. a:active 必须位于 a:hover 之后,这 样才能生效!
于是得四者顺序:
a:link----->a:visited------>a:hover-------->a:active。
可以这样记:LoVe HAte(爱恨) [注意大写字母]

结果:

       在CSS中,

一、若存在a{……}的定义

①如果a:link{}也存在,那么不管a{}放到哪里,a{}和a:link{}冲突的属性都会采用a:link{}的,不冲突的属性若存在a{}中,会被a:link{}、 a:visited{} 、a:hover{} 、a:active{}都继承;如果存在a:link{}中,只会被a:link{} 、a:hover{} 和a:active{}继承,a:visited{}不继承。
②如果没写a:link,只有其余三个,那么a:link会继 承a{}的所有属性,其余三个会保持自己的已有属性并从a{}中继承没有的属性。

③如果没写a:hover,只有其余三个,那么a:hover{}会继承a:link{}中的所有属性,并从a{}中继承自己没有的属性;a:link{}会保持自己已有属性并从a{} 中继承没有的属性;a:active{}会保持自己已有属性先从a:link{}中继承没有的属性,再从a{}中继承至此前还没有的属 性;a:visited{}会保持自己已有属性并直接从a{}中继承没有的属性。

④如果没写a:active{},只有其余三个,那么a:active{}会继承a:hover{}的所有属性,之后上溯到a:link{}中继承至此之前 自己还没有的属性,再从a{}中继承自己至此仍有的属性;a:hover{}会保持自己已有属性先从a:link{}中继承自己没有 的属性,再从a{}中继承至此仍没有的属性;a:visited{}会直接从a{}中继承自己没有的属性。

⑤如果没写a:visited{},只有其余三个,那么a:visited{}会继承a{}的所有属性。其余三个都是保持自己已有属性先从上一级(分级看上面的须知②,其中 a:link的上级是a)中继承没有的属性,再从a{}中继至此自己没有的属性。

二、若没有a{……}的定义

①如果没写a:link{},a:link{}将采用默认的字体大小(无)和颜色(蓝色)
②如果没写a:hover{},a:hover{}将继承a:link{}的所有属性。如果有a:hover{},它将从a:link{}中继承自己没有的属性。
③如果没写a:active{},a:active{}将先继承a:hover{}中 的所有属性,然后从a:link{}中继承至此仍没有的属性。
④如果没写a:visited{},a:visited{}将采用默认的字体大小(无)和颜色(紫色)。

综上所述,效果图如下:

(待续)


 

  评论这张
 
阅读(2141)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017