CSS 如何使用CSS更改活动链接的颜色

在本文中，我们将介绍如何通过使用CSS来更改活动链接的颜色。CSS（层叠样式表）是一种用于定义HTML文档样式的语言，通过使用CSS，我们可以对网页的外观和格式进行控制。

阅读更多：CSS 教程

什么是活动链接

活动链接指的是当用户与链接进行交互时，链接所呈现出的状态。在通常情况下，链接在没有被访问过时呈现为蓝色，并且在被访问后变为紫色。此外，当鼠标悬停在链接上方时，链接也会发生变化。这些不同的状态可以通过使用CSS来自定义。

使用CSS更改活动链接的颜色

要更改活动链接的颜色，我们可以使用CSS的伪类选择器来选择不同的链接状态，然后使用属性来定义颜色。下面是一些常用的伪类选择器：

:link：表示未被访问的链接
:visited：表示已被访问的链接
:hover：表示鼠标悬停在链接上方时的状态
:active：表示链接被点击时的状态

我们可以使用上述的伪类选择器来定义我们想要的链接颜色。例如，如果我们希望未被访问的链接保持为蓝色，已被访问的链接为紫色，悬停时的链接为红色，点击时链接为绿色，可以使用以下的CSS代码：

/* 未被访问的链接为蓝色 */
a:link {
  color: blue;
}

/* 已被访问的链接为紫色 */
a:visited {
  color: purple;
}

/* 鼠标悬停时链接为红色 */
a:hover {
  color: red;
}

/* 点击时链接为绿色 */
a:active {
  color: green;
}

在上述的代码中，我们通过选择合适的伪类选择器，并分别定义了不同状态下的颜色。当用户与链接进行交互时，链接的颜色将按照我们定义的方式进行变化。

示例说明

为了更好地理解如何使用CSS更改活动链接的颜色，我们来看一个具体的示例。假设我们有一个网页，其中包含了多个链接，并且我们希望根据不同的状态来改变链接的颜色。

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 未被访问的链接为蓝色 */
    a:link {
      color: blue;
    }

    /* 已被访问的链接为紫色 */
    a:visited {
      color: purple;
    }

    /* 鼠标悬停时链接为红色 */
    a:hover {
      color: red;
    }

    /* 点击时链接为绿色 */
    a:active {
      color: green;
    }
  </style>
</head>
<body>
  <h1>我的网页</h1>
  <p>欢迎访问我的网页，请点击以下链接：</p>
  <ul>
    <li><a href="http://www.example.com">Example</a></li>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.bing.com">Bing</a></li>
  </ul>
</body>
</html>

在上述的示例代码中，我们在<style>标签中定义了链接的不同状态下的颜色。在<body>标签中，我们创建了一个无序列表，其中包含了三个链接。

当我们在浏览器中打开这个示例网页时，我们会发现链接的颜色按照我们在CSS中定义的方式发生了变化。未被访问的链接为蓝色，已被访问的链接为紫色，悬停时链接为红色，点击时链接为绿色。