13、CSS 链接

链接的四种状态：

  • a:link —— 普通的、未被访问的链接
  • a:visited —— 用户已访问的链接
  • a:hover —— 鼠标指针位于链接的上方
  • a:active —— 链接被点击的时刻

当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

例：

<html>
<head>
<style>
a:link { color: #f00; text-decoration: none; }
a:hover { color: #f0f; text-decoration: underline; }
a:visited { color: #0f0; }
a:active { color: #00f; }
</style>
</head>
<body>
<a href="www.baidu.com" target="_blank">这是一个链接。</a>
</body>
</html>

a:link { color: #f00; text-decoration: none; }：颜色设为红色#f00，故刚生成网页时链接就是红色的，“text-decoration: none;”表示无下划线。
图片说明

a:hover { color: #f0f; text-decoration: underline; }：当鼠标放置在链接上，链接颜色设为粉色#f0f，“text-decoration: underline;”表示有下划线。
图片说明

a:visited { color: #0f0; }：访问过（已经点击过的）链接颜色为绿色#0f0。
图片说明

a:active { color: #00f; }正在点击链接的那一时刻，链接变成蓝色#00f。
图片说明