【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

摘要:
第二种情况:我将CSS定义顺序调整为:a:link、a:visited和a:over。此时,无论鼠标通过的链接是否已访问,它都将变为绿色。这是因为鼠标传递的不可访问链接有两个属性:a:link和a:over。在第一种情况下,a:link最接近它,因此它优先满足a:link,并放弃了a:over的重复定义。

以前用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时遵循的“就近原则”。

举例来说:

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

<1>.第一种情况:我定义的顺序是a:visited、a:hover、a:link,这时会发现:把鼠标放到未访问过的蓝色链接上时,它并不变成绿色,只有放在已访问的红色链接上,链接才会变绿。

<2>.第二种情况:我把CSS定义顺序调整为:a:link、a:visited、a:hover,这时,无论你鼠标经过的链接有没有被访问过,它都会变成绿色啦。

这是因为,一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性,在第一种情况下,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义。

在第二种情况,无论链接有没有被访问过,它首先要检查是否符合a:hover的标准(即是否有鼠标经过它),满足,则变成绿色,不满足,则继续向上查找,一直找到满足条件的定义为止。

一句话:在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。

这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。

当然,如果故意打乱顺序,也会造成一些特殊的效果。比如,可以为链接制造出下划线颜色与文字颜色的差异。

近日突然发现,原来这个CSS问题早已有高人提出啦。还是个老外呢。他给总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母: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的后面,,,

温故而知新:

  • a:link 设置 a 对象在未被访问前的样式。
  • a:visited 设置 a 对象在其链接地址已被访问过时的样式。
  • a:hover 设置 a 对象在其鼠标悬停时的样式。
  • a:acitve 设置 a 对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

免责声明:文章转载自《【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇如何编写可维护的面向对象JavaScript代码SOA——面向服务的体系架构下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS文字排版

1.文字排版--字体我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。 body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户...

css3 翻转和旋转的差别

我曾经一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明确,仅仅能怪自己的立体感太差了。 css3中的transform中有旋转,放缩,倾斜,平移的功能,分别相应的属性是:rotate,scale,skew,translate 旋转:(rotate) -webkit-transform:rotate(10deg);...

生活日记2015-8-15

10月31日可以收房了,今天售楼经纪电话通知支付物业维修基金,我也顺道去看看小区的进度如何。大部分的都已经完工,小区的绿化也差不多,听经纪介绍,泳池等设施还在施工当中,我所在的四栋正在装修中,不能上去看施工现场,悻悻然就回来了。老婆拍了几张照,作为个回忆见证。 发这篇博文同时也测试了下CSS3的一些特性,比如图片框带圆角、阴影、以及实现图片旋转一定角度,如果...

CSS链接四种状态注意顺序、UI伪类选择器的顺序

css定义超链接是要有先后顺序的。否则,可能会出现某个或某几个样式不起作用的bug。例如:visited与hover顺序颠倒了,则不能显示hover和active的样式了。 正确的顺序: a:link 未访问过的样式a:visited 访问过的 样式 a:hover 鼠标处于鼠标悬停状态的 样式 a:active 当鼠标左键按下时,被激活的 样式。 还有UI...

CSS Reset

为什么要重置 浏览器默认 CSS? 浏览器会对『标签』进行『默认设置』,不同浏览器的默认设置存在差异。 很多时候,浏览器的默认设置对我们开发者来说是没有用的。 那么,就需要开发者写覆盖的css将 浏览器的默认设置覆盖掉。 CSS Reset不仅是『清除默认样式』,而且要设置『全局默认样式』 怎么做? 引入时机: 在项目初期时,就应当将 reset文件定好。...

BootStrap响应式页面

BootStrap: Web前端CSS框架; BootStrap是基于HTML,CSS,JavaScript的. 由它设计页面可以在手机,pad,pc都可以按照预定义好的不同样式直接访问. BootStrap官网 准备工作: 1.下载BootStrap; 2.将BootStrap中的文件夹(css&fonts&js)导入项目中; 3.在网...

最新文章