CSS 动态超链接样式 LVFHA 或 LVHFA

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

1. <a href = "http://www.www.waibo">歪脖网</a>

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

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

1. a  {
2.    color: red;
3.    text-decoration: none;
4. }

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

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

1. a:link  {
2.    color: blue;
3. }
4. a:visited  {
5.    color: purple;
6. }

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

1. a:hover,  a:active  {
2.    color: red;
3. }

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

1. a:visited:hover {
2.    color: #888;
3. }

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

1. a:hover,  a:focus,  a:active  {
2.    color: red;
3. }

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

1. a:link,  a:visited {
2.    text-decoration: none;
3. }
4. a:hover,  a:focus,  a:active  {
5.    text-decoration: underline;
6. }

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

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

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。