在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示 - 在线编辑器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    a:link {
      color: #000000;
    }
    /* 未访问链接*/

    a:visited {
      color: #00FF00;
    }
    /* 已访问链接 */

    a:hover {
      color: #FF00FF;
    }
    /* 鼠标移动到链接上 */

    a:active {
      color: #0000FF;
    }
    /* 鼠标点击时 */
  </style>
</head>
<body>
  <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
  <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
  <p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>
​x
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    a:link {
      color: #000000;
    }
    /* 未访问链接*/
​
    a:visited {
      color: #00FF00;
    }
    /* 已访问链接 */
​
    a:hover {
      color: #FF00FF;
    }
    /* 鼠标移动到链接上 */
​
    a:active {
      color: #0000FF;
    }
    /* 鼠标点击时 */
  </style>
</head>
<body>
  <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
  <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
  <p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>