应用于<a>标签的伪类选择器(link、visited、active、hover)

原创 2018年04月16日 10:37:32

       CSS3根据选择符的用途可以把选择器分为标签选择器,类选择器,ID选择器,全局选择器,组合选择器,继承选择器和伪类选择器等。伪类选择符定义的样式最常应用于<a>标签上,它表示4种不同的状态:link(未访问链接)、visited(已访问链接)、active(激活链接)、hover(鼠标停留在链接上)。<a>标签可以只有一种状态link,或者同时具有两种或这三种状态。

<body>  
   <a href="#">空链接</a>
   <a href="www.baidu.com">百度</a>
   <style type="text/css">
       a:link{color:#FF0000; text-decoration:none}
       a:visited{color:#00FF00; text-decoration:none}
       a:hover{color:#0000FF; text-decoration:underline}
       a:active{color:#FF00FF; text-decoration:underline}
   </style>
</body>

效果图如下:

 

       上面的样式表式该链接未访问时是红色且无下划线,访问的后是绿色且无下划线,激活链接时是蓝色且有下划线,鼠标单击链接上为紫色且有下划线


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35768238/article/details/79957254

Windows Server 2012 Active Directory 管理

-
  • 1970年01月01日 08:00

伪类link,visited,focus,hover,active详解

CSS伪类用于向某些选择器添加特殊的效果。CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究。 :link 与 :visited 在样式文件...
  • benben1164
  • benben1164
  • 2015-12-18 15:11:33
  • 760

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

今天学到一个有趣的新知识呢,迫不及待的想分享一下。自学前端的这条路上,还在基础部分打转,未来好难,走好现在脚下的每一步才是我现在最重要的。小小地感慨一下,下面进入正题吧。 1. 标签 我们先说...
  • wumenglu1018
  • wumenglu1018
  • 2017-01-18 17:38:57
  • 5726

a:link a:visited a:hover a:active 样式顺序

1. a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的 2. a:active 必须被置于 a:hover 之后,才是有效的...
  • zjuwwj
  • zjuwwj
  • 2017-02-17 16:10:03
  • 814

A标签的四个属性 link ,visited , hover ,active 原来是有顺序的! LVHA

1。以前没注意,原来css定义超链接四个状态也是有顺序的。今天在网站里犯了这个错误,把hover写在visited 前面了,导致出现问题。 .a:link{text-decoration:none ;...
  • zxstone
  • zxstone
  • 2010-07-20 15:22:00
  • 9835

CSS中常用的四种链接状态:a:link、a:visited、a:hover及a:active

CSS 链接 不同的链接可以有不同的样式。 链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。 特别的链接,可以有不同的样式,这取决于他们是什么状态。 这四个链...
  • mtdyxsplzm
  • mtdyxsplzm
  • 2016-08-04 21:25:48
  • 1354

html中a标签点击状态失效(覆盖)——link,visited,hover,active的顺序

html中, 标签的点击事件有四个状态,分别是link、visited、hover、active,如果同时设置多个状态的显示且不按照一定状态的话,就会让一些效果被覆盖了。下面放一段错误代码,先设置ho...
  • qq_32623363
  • qq_32623363
  • 2017-08-05 21:01:24
  • 1434

css的link a:hover 必须在 a:link 和 a:visited 之后

近日突然发现,原来这个CSS问题早已有高人提出啦。还是个老外呢。他给总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。 再重复一遍正确的顺序:a:link、a...
  • u010002184
  • u010002184
  • 2015-10-24 18:23:58
  • 725

div+css处理链接的:link,:visited,:hover,:active四种状态

div+css处理链接的:link,:visited,:hover,:active四种状态 [示例代码]                         a:lin...
  • hu_zhenghui
  • hu_zhenghui
  • 2007-09-23 15:08:00
  • 4457

CSS样式表中a:link,a:visited,a:hover,a:active属性含义

a:link,a:visited,a:hover,a:active 分别是什么意思,有什么用途 明了的:  link:连接平常的状态       active:连接被按下的时候       v...
  • yenange
  • yenange
  • 2011-08-01 10:11:27
  • 5442
收藏助手
不良信息举报
您举报文章:应用于<a>标签的伪类选择器(link、visited、active、hover)
举报原因:
原因补充:

(最多只允许输入30个字)