CSS样式表中a:link,a:visited,a:hover,a:active属性含义
2008-02-08 19:53
a:link,a:visited,a:hover,a:active 分别是什么意思,有什么用途
明了的:
link:连接平常的状态
active:连接被按下的时候
visited:连接被访问过之后
hover:鼠标放到连接上的时候
详细的:
:hover版本:CSS1/CSS2 兼容性:IE4+ NS4+
语法:
Selector : hover { sRules }
说明:
设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
目前IE5.5+仅支持CSS1中的:hover。
:active版本:CSS1/CSS2 兼容性:IE4+
语法:
Selector : active { sRules }
说明:
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
目前IE5.5+仅支持CSS1中的:active。
:link版本:CSS1 兼容性:IE4+ NS4+
语法:
Selector : link { sRules }
说明:
设置a对象在未被访问前的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。
对于无href属性(特性)的a对象,此伪类不发生作用。
:visited版本:CSS1 兼容性:IE4+ NS4+
语法:
Selector : visited { sRules }
说明:
设置a对象在其链接地址已被访问过时的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。
对于无href属性(特性)的a对象,此伪类不发生作用。
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确。
给出我试的顺序,可能会对大家有一些帮助:
代码
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语句都起到效果。
当然,如果故意打乱顺序,也会造成一些特殊的效果。比如,可以为链接制造出下划线颜色与文字颜色的差异。
近日突然发现,原来这个CSS问题早已有高人提出啦。还是个老外呢。他给总结了一个便于记忆的“爱恨原则
”(L
oV
e/H
A
te),即四种伪类的首字母:LVHA。
再重复一遍正确的顺序:a:link、a:visited、a:hover
、a:active
.
最后经验补充:
1.鼠标经过的“未访问链接”同时拥有
a:link、a:hover
两种属性,后面的属性会覆盖前面的属性定义;
2.鼠标经过的“已访问链接”同时拥有
a:visited、a:hover
两种属性,后面的属性会覆盖前面的属性定义
;
所以说,a:hover定义一定要放在a:link、a:visited的前面,,,
分享到:
相关推荐
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确。 给出我试的顺序,可能会对大家有...
a:link{ CSS样式规则; } 未访问时超链接的状态 a:visited{ CSS样式规则; } 访问后超链接的状态 a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态 a:active{ CSS样式规则; } 鼠标点击不动时超链接的状态 总结 ...
link、visited、hover、active 未移入a标签链接时:link 移入a标签链接时:link、hover 点击a标签链接时:link、hober、active 点击后未移入a标签连接时:link、visited 点击后移入a标签连接时:link、visited...
css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性。 (2) :visited:设置a对象在其链接...伪类名字对大小写不敏感,但在定义顺序上有要求。:hover必须被置于:link和:visited之后才
伪类选择符包括:总: a 表示所有状态下的连接 如 .mycls a{color:red}① a:link:未访问链接 ,如 .mycls a:link {color:blue}② a:visited:已访问链接 ,如 .mycls a:visited{color:blue}③ a:active:激活时(链接...
友情提醒:修改风格设置必须具备一定网页css样式设计知识,建议您找些这方面的书看一下,在定义中也不能使用单引号或双引号,否则会容易造成程序错误。 ============================...
A:link 超链接的默认样式 A:visited 访问过的(已经看过的)链接样式 A:hover 鼠标处于鼠标悬停状态的链接样式 A:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。 正常顺序如下: 复制...
css中关于超链接的四个属性一般正常顺序为:link,visited,hover,active,即: a:link 链接平常的状态 a:visited 链接被访问过之后 a:hover 鼠标放到链接上的时候 a:active 链接被按下的时候
a:link, a:visited { color: #f5ea01; text-decoration: none; font-weight: bold; } a:active, a:hover { color: #f5ea01; text-decoration: underline; } p { margin: 0px; padding: 0px; }
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。 提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。 伪元素选择器:并不是针对真正的元素使用的选择器,...
#nav .n01 a:visited { background-position:0 -114px; } #nav .n01 a:hover { background-position:0 -38px; } #nav .n01 a:active { background-position:0 -76px; } #nav .n02 a:link { background-position:-...
a:link,a:visited{ color:#FC0; text-decoration:none; /*清除超链接默认的下划线*/ margin-right:20px; } a:hover{ color:#0F0; text-decoration:underline; /*鼠标悬停时出现下划线*/ } a:active{ color:#F00;} ; ...
③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue} ④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue} 一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。 前三者...
CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下... a:hover,定义鼠标悬浮在链接上时的样式; a:active,定义鼠标点击链接时的样式。 示例: 复制代
CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的... a:hover,定义鼠标悬浮在链接上时的样式; a:active,定义鼠标点击链接时的样式。 示例: 复制代码代码如下: a:link { colo
a:link{ text-decoration:none; } a:visited { text-decoration: none; } a:hover { font-size: 18px; color: #FF0000; text-decoration: none; } a:active { text-decoration: none; } 包含CSS样式
A:link,A:active,A:visited{TEXT-DECORATION:none ;Color:#3C2F1D} A:hover{TEXT-DECORATION: underline;Color:#4455aa} BODY{ FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: 宋体; background-color: #ECF5FF...
CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪:link,:visited,:hover,:active等。 除了它们,还有一些不被常使用的伪类,有:focus,:first-child,:lang等。 而且CSS里不光有伪类...
超链接的样式有: a:link 链接未点击上去时候 a:visited 链接...–chrome浏览器下可以将链接原始属性都写在a:link中,IE内核的浏览器中链接的原始属性中除下划线之外的属性需写在a中–> a { font-size: 12px; color: