谈一谈a:link、a:visited、a:hover、a:active的正确使用顺序

前端路上,未来还远,所以基础部分必须扎实,走好现在脚下的每一步才是现在最重要的。

下面进入正题吧。

1. <a>标签

我们先说一说<a>标签是干啥用的。

<a> 标签定义超链接,用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性,它指示链接的目标。

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

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

<a>标签还有一个很重要的属性:target,它用于规定在何处打开链接文档,取值有:_blank;_parent;_self;_top。这个我后面也会小小地总结一下。

2. a链接的四种状态

伪类是CSS 用于向某些选择器添加特殊的效果。

a标签中有四个:link、visited、hover、active

(1)link

说明:设置a对象在未被访问前的样式表属性。

(2)visited

说明:设置a对象在其链接地址已被访问过时的样式表属性。

(3)hover

说明:设置对象在其鼠标悬停时的样式表属性。

(4)active

说明:设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。

定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序:a:link、a:visited、a:hover、a:active

解释:

  • link:连接平常的状态
  • visited:连接被访问过之后
  • hover:鼠标放到连接上的时候
  • active:连接被按下的时候

举例来说:

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

第一种情况:我定义的顺序是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问题早已有高人提出啦,还是个老外呢。他给总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。

再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .

最后经验补充:

css的样式覆盖特性导致其必须按照特定顺序去写。

1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性,后面的属性会覆盖前面的属性定义;

2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性,后面的属性会覆盖前面的属性定义;

所以说,a:hover定义一定要放在a:link、a:visited的后面!

.

.

原文地址:https://www.cnblogs.com/jianxian/p/9313919.html

时间: 2024-11-29 11:00:16

谈一谈a:link、a:visited、a:hover、a:active的正确使用顺序的相关文章

a:link,a:visited,a:hover,a:active

a:link,a:visited,a:hover,a:active 1:解释 link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下的时候      详细的: :hover版本:CSS1/CSS2 兼容性:IE4+ NS4+ 语法: Selector : hover { sRules } 说明: 设置对象在其鼠标悬停时的样式表属性. 在CSS1中此伪类仅可用于a对象.且对于无href属性(特性)的a对象,此伪类不发生作用.在CSS2

css中链接的4个状态 link、visited 、hover、active 顺序与设置

link       未点时链接色visited  已点过的链接色hover   光标放入链接上的色active   点击时的样式 顺序一定要按link.visited.hover.active来设置 1)普通形式a:link{}a:visited{}a:hover{}a:active{} <a href="...">...</a> 2)单个classa.clsname{}a.clsname:link{}a.clsname:visited{}a.clsname:

a标签的link,visited,hover,active分别是什么

a:link {color: #FF0000} /*未访问状态*/ a:visited {color: #00FF00}/*已访问状态*/ a:hover {color: #FF00FF}/*鼠标移入到元素上面时的状态*/ a:active {color: #0000FF}/*鼠标按下状态状态*/

a:link a:visited a:hover a:active四种伪类选择器的区别

a:link选择网页中所有没有被visited的a标签(就是没有鼠标悬停hover或者点击click) a:visited选择网页中所有已经被click的a链接,用来告诉用户这个链接已经被你访问过了 a:hover,说实话这个我用的最多,其实就是选择有鼠标悬停的a链接 a:active,顾名思义active就是活动的意思,表示的是选择用户点击并且还没有放开时(其实就是按住)的a链接 当然还有其他的譬如a:focus,这个表示选择光标(焦点)落下的a链接.

CSS样式中visited,hover,active , focus这四个分别表示什么意思?

CSS伪类用于向某些选择器添加特殊的效果.CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置. :focus,: hover,:active这几个,如果你设置的顺序不同,会直接影响样式的显示效果. :focus -> :hover -> :active 有些人可能会困惑,为什么必须要按这样的顺序,而不能打乱呢? 其实他们每一个选择器都代表一个含义. :link代表为访问链接

谈一谈商品编码的问题

如题:今天谈一谈商品编码的问题,我们不是完全从物流和商品本身的角度去谈商品该怎么编码才符合国际标准,EAN,UPC啥啥啥怎么样的.我们从计算机程序设计,电商,数据库存储的角度看一看商品编码,首先商品有哪些编码,然后这些编码和商品的关系,在然后这些编码该怎么使用.要从电商的角度了解商品,马上想到的可能是淘宝,天猫,京东,亚马逊等他们的商品是怎么样子,是怎么存储的. 这些这么成熟的电商完全可以参考和借鉴.关于商品这个话题还是太大,因为商品本身设计的东西太多了,不同活动先不同的价格,多规格商品,不同的

谈一谈软件BUG造成的严重危害

写下本文的原因是因为这是老师布置的一个作业,谈一谈自己在实际的软件开发过程中所遇到的.并对自己影响很大的bug.无奈的是,笔者是一个软件开发的初学者,接手过的项目实在有限,在自己编写的有限的代码中所遇到的bug多是由于粗心而引起的语法问题.符号问题.代码格式问题.这些虽然是小问题,但作为一个程序员,这些看似不起眼的“小问题”却可能引起程序不能运行,出错等一系列的“大问题”,所以作为初学者的我也要时刻提醒自己,不断检查,不断完善.在认识了bug的危害性之后,突然让我不禁想起一个有关bug造成恶劣影

【dotnet跨平台】谈一谈dotnet-cli开源社区的产品持续集成

?? [dotnet跨平台]谈一谈dotnet-cli开源社区的产品持续集成 进入其中一个PR:https://github.com/dotnet/cli/pull/2580 可以看到微软使用自己搭建的持续集成平台来保证产品和代码的质量,其中每一个即将整合代码到rel/1.0.0这个主分支的代码都要经过7个测试通过,其中2个windows平台,4个linux平台和一个OS X平台如下: Details Windows_NT x64 Release Build - Build finished.

谈一谈我最喜欢的诗人--法国诗人波德莱尔

很多时候我都沉醉于波德莱尔的诗集中....... 虽然我没有看过波德莱尔相关的信息,但是看他的诗,却能够让我感受到一颗炽烈的心再向生活中的种种现象作出了自己的反思和歇斯底里的抗议,虽然有点颓废,但是他一直都在努力地避免陷入生活中糟糕的状态,波德莱尔一直都在观察生活,向我们解释了生活中的种种细节方面的信息.波德莱尔似乎是倾向于社会主义的诗人,这一点我在他的诗中能够强烈地感受到这一点,因为他是反对资本主义糜烂的物质生活的.对于当下的我们也是一记警钟.为什么呢?当人陷入物质的海洋中却没有精神信仰的寄托