6.1.1 动态超链接

在HTML中，通过 a 元素来定义超链接，并通过 a 元素的 href 属性来定义链接的目标地址。

<a href = "http://www.www.waibo">百度</a>

默认情况下，超链接是蓝色字体并带有下划线，被访问后，链接文本会变为紫色并且也带有下划线。并且，默认的链接样式平淡无奇，通过CSS，可以设置超链接的各种属性，如字体、颜色、背景等，并结合链接伪类，便可以实现各种各样的动态链接效果。

对链接应用样式最容易，也是最简单的方式，就是使用元素选择器。如，以下规则是所有的锚文本都显示为红色，并去掉链接的下划线。

a  {
   color: red;
   text-decoration: none;
}

但是，这样定义链接之后，页面上的所有链接都变成了红色，也无法区分哪些链接是已经访问过的，哪些是没有被访问过的。

为了避免这个问题，CSS提供了链接伪类选择器，用来寻找处于不同状态的链接。:link伪类选择器寻找未被访问过的链接，:visitd 伪类选择器寻找已被访问过的链接。所以，下面代码中，所有没有被访问过的链接将是红色，所有被访问过的路径将是紫色。

a:link  {
   color: blue;
}
a:visited  {
   color: purple;
}

这时，就可以为链接应用 :hover 和 :active 这两个动态伪类选择器。:hover寻找鼠标悬停的元素，:active 寻找被激活的元素，对于链接，激活发生在鼠标已经按下、还没有释放的时候。

a:hover,  a:active  {
   color: red;
}

另外，动态伪类选择器也可以连在一起使用，以创造更丰富的样式，如定义已被访问链接的悬停效果。

a:visited:hover {
   color: #888;
}

为了尽可能提高页面的可访问性，在定义鼠标悬停状态时，最好为链接定义 :focus 伪类选择器，以便用户通过键盘移动到链接上时，链接的样式与鼠标悬停时的样式相同。:focus 伪类选择器，会寻找获得焦点的元素。

a:hover,  a:focus,  a:active  {
   color: red;
}

默认情况下，浏览器会为链接添加下划线，而人们常常习惯于去掉未访问和已访问链接的下划线，当悬停、获得焦点、激活时，再为链接添加下划线。

a:link,  a:visited {
   text-decoration: none;
}
a:hover,  a:focus,  a:active  {
   text-decoration: underline;
}

定义链接样式时，选择器的顺序非常重要，如果上面的顺序反过来，悬停和激活的样式就不起作用了。根据样式层叠规则，当两个规则具有相同的特殊性时，后定义的规则会覆盖先定义的规则，所以，a:link 和 a:visited 样式将覆盖 a:hover，a:focus，a:active 样式。

于是，为了确保不会发生这种情况，一定要按照 LVFHA 的顺序定义链接的样式，即按照link（L）、visited（V）、focus（F）、hover（H）、active（A）的书写顺序。也有人提议使用LVHFA 的顺序，这也是可行的。