CSS 如何更改链接颜色

链接是指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.tutorialspoint.com/">  link to tutorialspoint </a>
</body>
</html>

通过使用“id”和“class”选择器

如果我们只想更改特定链接的颜色，可以使用class或ID选择器。例如，如果我们在某些链接上有一个名为“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.tutorialspoint.com/"> Change the link color with ID Selector in CSS </a>
   <p></p>
   <a class="special-link" href = "https://www.tutorialspoint.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.tutorialspoint.com/"> Change the link color with Mouse-hover in CSS </a>
</body>
</html>