揭秘CSS(第 1 版)
6.1.1 动态超链接
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

链接的样式

动态超链接

在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 的顺序,这也是可行的。

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验