欢迎来到HELLO素材网!
丰富的DIV CSS模版、JS,jQuery特效免费提供下载
当前位置:主页 > 建站教程 > DIVCSS教程 >

关于CSS中a:link无效以及a:link、a:visited、a:hover、

发表于2014-06-08 11:31| 次阅读| 来源未知| 作者总统

摘要:有两个标签 a更多免费模板,请访问csshello.com/aa href="www.csshello.com"更多免费模板,请访问csshello.com/a 并且有两个样式 a{ color:blue;}a:link{color:black;} a{ color:blue}是蓝色,a:link{ color:black}是黑色

有两个标签

<a>更多免费模板,请访问csshello.com</a>
<a href="www.csshello.com">更多免费模板,请访问csshello.com</a>

并且有两个样式

a{ color:blue;}
a:link{color:black;} 

a{ color:blue}是蓝色,a:link{ color:black}是黑色,实际显示的颜色是,使用a的是蓝色,使用a:link的是黑色,这说明a:link会对拥有href=”“,即拥有实际链接地址的a对象发生效果。而对直接使用a对象的内容不产生效果。实际上,大多数情况我们直接用a而不是a:link,一般情况下最终效果都会完全相同。

最终运行效果

前者对应的是没有href的a标签,后者是带href的a标签

但是很多时候我们发现a:link设置的样式对链接没有反应,这是因为浏览器存在缓存的问题,你换个浏览器或者清除浏览器缓存就能看到a:link设置的样式是有用的

下面来说一下a:link、a:visited、a:hover、a:active的用法

在使用这些标签的时候我们一定要遵守LVHA这个效果,否则将不能达到你预想的效果,当然a:link和a:visited这两个的位置可以随意。即下面的这种排列顺序

a{ color:blue;}
a:link{color:black;}     /* 未访问的链接 */
a:visited{ color:red;}/*链接以及点击过的样式*/
a:hover{ color: green;}/*鼠标悬浮在链接上的样式*/
a:active {color:purple;}   /* 链接被按下时候的状态,介于hover、visited之间的一个状态 */