超链接标签的CSS伪类link,visited,hover,active
CSS伪类，是一种特殊的类，它针对到CSS选择器起作用，使选中的标签或元素产生特定的效果。
CSS伪类的语法就是： 选择器 : 伪类名 { 属性 : 属性值 }
用的最多的伪类就是超链接a的伪类，有:link，:visited，:hover，:active，而且需要按照这个顺序设置，有个简单的记法是，取首字母组成 love hate，记住“爱恨”就行了。
1， 查看超链接a标签的默认样式
新建一个网页a.html，复制下面的内容：
<html>
<head>
</head>
<body >
<a>没有href的a标签,字体没有修饰，鼠标放上去也没反应</a> </br>
<a href="#" target="_blank"> href为#的a标签，默认蓝色，带下划线，鼠标放上去变成手 </a> </br>
<a href="http://www.a.com" target="_blank" >href为网址的a标签，效果同上</a>
</body>
</html>
在浏览器中查看，效果如下：
2， 去掉超链接的下划线
一般我们看到的超链接都是没有下划线的，这里通过css去掉下划线。
<html>
<head>
<style type="text/css">
a { text-decoration:none;}
</style>
</head>
<body >
<a>没有href的a标签,字体没有修饰，鼠标放上去也没反应</a> </br>
<a href="#" target="_blank"> href为#的a标签，默认蓝色，带下划线，鼠标放上去变成手 </a> </br>
<a href="http://www.a.com" target="_blank" >href为网址的a标签，效果同上</a>
</body>
</html>
效果图如下：
通过 a { text-decoration:none;} 去掉下划线。
这句话的意思是“设置a标签的文本修饰为none，就是没有样式”
3， 给a标签添加上伪类，代码如下：
<html>
<head>
<style type="text/css">
a { text-decoration:none;}
a:link { color: red;}
a:visited { color: green;}
a:hover { color: blue;}
a:active { color: yellow;}
</style>
</head>
<body >
<a>没有href的a标签,字体没有修饰，鼠标放上去也没反应</a> </br>
<a href="#" target="_blank"> href为#的a标签，默认蓝色，带下划线，鼠标放上去变成手 </a> </br>
<a href="http://www.a.com" target="_blank" >href为网址的a标签，效果同上</a>
</body>
</html>
效果图如下：
此时，CSS起作用的是a:link { color: red;}
如果a标签具有href属性，并且没有被浏览器打开过，超链接就会显示为红色；
第一个a标签没有href属性，显示效果和文本一样。
第二个虽然是个无效的href值，href=”#”，但是这种情况也常用，可以通过脚本写一些事件；
第三个是有效的链接地址，显示正常。
浏览器似乎会记忆很长时间，只要你曾经打开过这个href中写的url，它都会认为你打开过这个链接。
4， 单击a标签，查看访问过的样式
效果图如下：
此时可以看出，a标签中的文本都变为绿色了。
此时起作用的是a:visited { color: green;}
它的作用就是设置被访问过的超链接a的样式。
而且只要被浏览器访问过，浏览器会记忆很久。
5， 把鼠标放到超链接上，查看效果
此时，第一个标签显示为蓝色，因为我用的是qq截图，所以没有把“鼠标手”截图下来。
a:hover { color: blue;}
这是设置当鼠标放到标签a的上方的时候，应用的样式，这里设置字体为蓝色；当鼠标移走，就又恢复了本来的样式。
6， 单击一下超链接，看看效果
此时可以看到，超链接字体变为了黄色。
a:active { color: yellow;}
这个就是设置当单击(也就是激活)a标签时，超链接的样式。这里设置字体黄色。
二、著名网站对a标签的设置
1，网站导航hao123.com
该网站首先对a标签进行统一的设置，代码如下：
a {
color: #333;
text-decoration: none;
outline: 0px none;
}
设置了字体颜色，去掉了下划线。
然后，当把鼠标放到超链接上时，效果如下：
字体设置为红色，带有下划线。
代码如下：
a:hover { color: red; text-decoration:underline}
对hao123来说，他只设置了这a标签的通用样式，和鼠标悬浮状态，这样，我们看着导航网也比较正常，否则会导致一个网页上，超链接颜色不同，不好看。
2，腾讯qq网
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
3，淘宝网
a{
color:#6d6d6d;
text-decoration:none
}
a:hover{
color:#ff4200;
text-decoration:underline
}
因为IE6对 : hover 是支持的，而对其他的伪类不是太支持，因此设置一个 a 的通用样式和 : hover样式就足够了。
而且也没有必要对a标签设置4中状态，上面的例子就可以看出。
文章在百度经验的地址：
http://jingyan.baidu.com/article/0320e2c1f7a5741b87507bf0.html
超链接标签的CSS伪类link,visited,hover,active的更多相关文章
- a标签伪类link，hover，active，visited，focus区别
<div id="content"> <h3><a class="a1" href="#">a标签伪类l ...
- HTML5新标签和CSS伪类
HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端 <nav> <footer> <section> <header&g ...
- CSS:a:link;visited;hover;active解释及正确顺序
a:link 选择器设置指向普通的.未被访问页面的链接的样式, a:visited 选择器用于设置指向已被访问的页面的链接, a:active 选择器用于活动链接, a:hover 选择器用于选择鼠标 ...
- a：link visited hover active
CSS中a:link.a:visited.a:hover.a:active的用法:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在网页设计中,设计美观的超链接效果可以增强网站的用户体验,可能会 ...
- [CSS3] Interactive Pseudo-Classes :link :visited :hover :active
The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what ele ...
- 关于link, visited, hover, active
LoVe/HAte 如果只是希望点击的时候显示背景色,那么只需要设置 :active,无需设置:hover #navbar:active, #backbtn:active { background-c ...
- CSS伪类整理笔记
0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...
- CSS 伪类
Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
随机推荐
- Cholesky分解(Cholesky decomposition / Cholesky )
Cholesky decomposition In linear algebra, the Cholesky decomposition or Cholesky is a decomposition ...
- golang实现文件上传权限验证(超简单)
Go语言创建web server非常简单,部署也很容易,不像IIS.Apache等那么重量级,需要各种依赖.配置.一些功能单一的web 服务,用Go语言开发特别适合.http文件上传下载服务,在很多地 ...
- 【转】你是不是也被Android Private Libraries、Referenced Libraries、android Dependency搞晕了~~
一.v4.v7.v13的作用和用法 1.Android Support V4, V7, V13是什么? 本质上就是三个java library. 2.为什么要有support库? 是为了解决软件的 ...
- 使用正则表达式验证IP地址
实现效果: 知识运用: 实现代码: public bool validate(string str_IP) { string regex = @"(25[0-5]|2[0-4]\d|[0-1 ...
- numpy中的inf
numpy中的inf表示一个无限大的正数 import numpy x = numpy.inf x>9999999999999999999 结果为: True
- 在IDEA中创建Maven项目和添加tomcat
IDEA中创建是一种创建maven项目的办法,但不推荐,因为没有使用统一的骨架,可以一开始就选择创建maven项目,步骤如下: 第一步 第二步:设置项目 第三步:进行配置好maven,加上 arche ...
- python main
python中的main函数,总体来说就是,main比较适合写test测试,有点类似于java中的testcase,就是程序单独运行时是运行main的,但是当被调用时就不会运行main了.具体可以参考 ...
- JS中的执行环境和作用域
window 是最大最外围的执行环境,然后每个函数都有自己的执行环境.JS代码是从上到下执行的,单纯的用语言描述可能会有点绕,而且不大直观.我们看着代码来 console.log('global be ...
- 【例题收藏】◇例题·IV◇ Wooden Sticks
◇例题·IV◇ Wooden Sticks 借鉴了一下 Candy? 大佬的思路 +传送门+ (=^-ω-^=) 来源:+POJ 1065+ ◆ 题目大意 有n个木棍以及一台处理木棍的机器.第i个木棍 ...
- linux下安装xtrabackup
下载需要的版本的xtrabackup软件包,链接如下: https://www.percona.com/downloads/XtraBackup/LATEST/ percona-xtrabackup- ...