如何在 CSS 中更改链接颜色?

cssweb developmentfront end technology更新于 2025/3/9 21:32:17

链接是指 HTML 锚点元素，用 <a> 标签表示。此元素用于创建超链接，允许用户在网页和其他资源之间导航。

CSS(层叠样式表)是一种强大的语言，用于控制网页的视觉呈现。我们可以使用 CSS 实现的最重要的功能之一就是更改网页上链接的颜色。在本文中，我们将介绍在 CSS 中更改链接颜色的不同方法。

使用"a"选择器

这是在 CSS 中更改链接颜色的基本方法。此选择器会将网页上的所有链接作为目标。color 属性用于更改链接文本的颜色。以下是示例 -

a{
    color:blue;
}

示例

这是一个使用 CSS 中的"a"选择器更改链接颜色的示例。

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a{
         color:blue;
      }
   </style>
</head>
<body>
   <h2>Change the link color in CSS</h2>
   <a href = "https://www.cainiaomax.com/">  link to tutorialspoint </a>
</body>
</html>

通过使用"id"和"class"选择器

如果我们只想更改特定链接的颜色，可以使用 class 或 ID 选择器。例如，如果某些链接的 class 为"special-link"，我们将使用以下代码更改这些链接的颜色 -

.special-link{
   color:blue; (By using class seletor)
}
#special-link{
   color:blue; (By using id seletor)
}

示例

以下是使用 CSS 中的"ID"和"Class"选择器更改链接颜色的示例。

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      #special-link {
         color: red;
      }
      .special-link {
         color: green;
      }
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.cainiaomax.com/"> Change the link color with ID Selector in CSS </a>
   <p></p>
   <a class="special-link" href = "https://www.cainiaomax.com/"> Change the link color with CLASS Selector in CSS </a>
</body>
</html>

使用":hover"伪类

要更改链接悬停时的颜色，我们使用":hover"伪类。例如

a:hover {
    color: red;
}

此 CSS 代码会在链接悬停时将其颜色更改为红色。

示例

以下是使用 CSS 中的".hover"伪类更改链接颜色的示例。

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a {
         color: blue;
      }
      a:hover {
         color: red;
      } 
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.cainiaomax.com/"> Change the link color with Mouse-hover in CSS </a>
</body>
</html>