在 007 、 017 我们只是简单使用了，href 的超链接功能，这次详细介绍下所有用法
我先从 W3c - CSS 手册，把官方伪类样式说明给你看下：
就是四种：
1.a:link
设置a对象在未被访问前（未点击过和鼠标未经过）的样式表属性。
也就是html a锚文本标签的内容初始样式。
2.a:hover
设置对象在其鼠标悬停时的样式表属性。
也就是鼠标刚刚经过a标签并停留在A链接上时样式。
3.a:active
设置A对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
也就是鼠标左键点击html A链接对象与释放鼠标右键之间很短暂的样式效果。
4.a:visited
设置a对象在其链接地址已被访问过时的样式表属性。
也就是html a超链接文本被点击访问过后的CSS样式效果。
常用的都是通过 Css 样式来控制上面 4 种超链接样式，中文看着很费劲吧。。。
英文简单易懂：link、hover、active、visted
废话不多说，先上一段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接大全</title>
<style type="text/css"></style>
</head>
<body>
<div>
吹尽天下之水，凡开卷有益
</div>
</body>
</html>
效果图：
这就完成了一个最简单的超链接，很简单。
为了和 047 - H5布局入门总结（36 - 46）形成统一风格，特意添加 div 区块，其实不写一样。
稍微解释下 target 属性，也有四个参数：
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
设置页面打开超链接的情况，按需使用即可。
1
链接初始样式
先修改超链接初始样式 a：link
a:link {
font-size:33px;
font-family: "NSimSun";
text-decoration: none;
}
最后一个 text-decoration 是用来修改超链接下划线滴，实际开发常常none
text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式
text-decoration:underline 下划线样式
text-decoration:line-through 删除线样式-贯穿线样式
text-decoration:overline 上划线样式
效果图：
2
链接访问后样式
第二次修改a：visited样式：
a:visited{
font-size:23px;
color:#F08;
text-decoration: none;
}
点击完超链接，原始超链接效果变为：
3
鼠标放到链接上样式
添加 a:hover
a:hover{
font-size: 66px;
color: #6F6;
font-family: "HeiTi";
text-decoration: overline;
}
效果图：
放到 hover 样式，咱们用过，不做细说～
4
链接被按下时样式
添加 a:active
a:active{
font-size: 100px;
color: #6F6;
text-decoration: line-through;
}
效果图：
注意，下按，就是按下鼠标左键不松开的效果
一松开左键，则将执行跳转。
5
修改样式顺序
a:hover{
font-size: 66px;
color: #6F6;
font-family: "HeiTi";
text-decoration: overline;
}
a:link{
color: #000;
font-size:33px;
font-family: "NSimSun";
text-decoration: none;
}
a:visited{
font-size:333px;
background-color:#F08;
text-decoration: none;
}
a:active{
font-size: 100px;
color: #6F6;
text-decoration: line-through;
}
效果图：
发现 hover 就不好使了！
Why？
很简单伪类选择有顺序要求：
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
