学习的目的
不是知识而是行动

探讨a a:link a:visited a:hover a:active部分没生效问题

今天做博客模板,CSS文件a、a:hover,a:active、a:visited,a:link均已设置{text-decoration:none;},可鼠标点击链接还是有下划线。只有去网上找解决方法了,下面就是我在网上找到的解决办法。

以下是转的原文:

起因:

     今日做项目,至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{}将采用默认的字体大小(无)和颜色(紫色)。

分享到:更多 ()