CSS学习系列十;超级链接样式:

对于文字链接而言,除了可以使用文字样式以外,还可以使用伪类来定义样式.

在HTML里面默认超级链接有3个状态,为被访问过超级链接为蓝色.已经被访问过的超级链接是紫色 正在被单击的超级链接是红色.为了可以重新设置超级链接的状态.css为超级链接创建了4个伪类;

分别是为被访问前的样式(:link) 鼠标停靠时的样式(:hover) 单击时的样式(:active) 访问后的样式(:visited)

定义和用法

:link 伪类向未访问的链接添加特殊的样式。

这个伪类应用于尚未访问过的链接；也就是说，链接所指的 URI 尚未出现在用户代理的历史中。这种状态与 :visited 状态是互斥的。

说明

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！

注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！

注释：Pseudo-class（伪类）的名称对大小写不敏感。

注释：伪类可与 CSS 类配合使用：

a.red:visited {color: #FF0000;}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

如果上面这个例子中的链接已访问过，那么它会显示为红色。

实例

规定链接的颜色：

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

TIY （在页面底部可以找到更多实例）