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的更多相关文章

  1. a标签伪类link，hover，active，visited，focus区别

    <div id="content"> <h3><a class="a1" href="#">a标签伪类l ...

  2. HTML5新标签和CSS伪类

    HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端 <nav> <footer> <section> <header&g ...

  3. CSS:a:link;visited;hover;active解释及正确顺序

    a:link 选择器设置指向普通的.未被访问页面的链接的样式, a:visited 选择器用于设置指向已被访问的页面的链接, a:active 选择器用于活动链接, a:hover 选择器用于选择鼠标 ...

  4. a：link visited hover active

    CSS中a:link.a:visited.a:hover.a:active的用法:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在网页设计中,设计美观的超链接效果可以增强网站的用户体验,可能会 ...

  5. [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 ...

  6. 关于link, visited, hover, active

    LoVe/HAte 如果只是希望点击的时候显示背景色,那么只需要设置 :active,无需设置:hover #navbar:active, #backbtn:active { background-c ...

  7. CSS伪类整理笔记

    0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...

  8. CSS 伪类

    Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...

  9. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

随机推荐

  1. Django QuestSet API （官方文档）

    1.返回新查询集的方法 (1)filter():滤指定条件的结果 Entry.objects.filter(pub_date__gt=datetime.date(2005, 1, 3), headli ...

  2. 进程、内存的理想与现实 VS 虚拟内存

    理想情况下一个进程的运行,需要一块足够大的连续的内存进行装载. 现状: 1)内存不够大:分解进程内存空间. 2)内存不连续:内存映射.

  3. 2017.9.22 HTML学习总结--JavaScript脚本语言

    接上: 1.JavaScript脚本语言 定义:javascript是一种简单的脚本语言,可以在浏览器中直接运行, 是一种在浏览器端实现网页与客户交互的技术javascript代码可 以直接运行在ht ...

  4. redis 系列 在 vs上 set，get 键值

    1.启动两个 cmd,一个用于打开服务,一个用于运行客户端. 详细步骤可见上一篇文章 2.下载nuget的 ServiceStack.Redis;  ,并在using中引用 ,详细步骤可见上一篇文章 ...

  5. 关于requireJS的同步加载和异步加载

    这篇随笔主要记录require('name')和require(['name1','name2'])在同步和异步加载使用的区别 1.require('name')同步加载模块的形式 define(fu ...

  6. ZIGBEE report机制分析

    ZIGBEE提供了report机制(现在只学习了send, receive还没学习) 主要目的是实现attribute属性的report功能,即提供了一种服务端和客户端数据同步的机制 以EMBER的H ...

  7. Maven tomcat插件 远程发布【Learn】

    Tomcat配置修改: ①.conf/tomcat-users.xml <role rolename="manager-gui"/> <role rolename ...

  8. 开发常用宏 - iOS

    以下是一些开发中会经常用到的宏,简单的进行了整理,为了今后可以更加方便的使用,从而提升开发的效率,不为此搭进去更多时间. 也希望有大家可以补充,从而使其更加强加! /** * 开发常用宏相关 */ # ...

  9. Webpack4 学习笔记四 暴露全局变量、externals

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...

  10. Xtrabackup实现MySQL备份

    一.xtrabackup介绍 Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写)它由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上 ...