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

在 CSS 中更改链接颜色是一个非常简单的过程。我们将了解更改 CSS 中链接颜色的不同方法。在这篇文章中，我们有很多链接，我们的任务是使用 CSS 更改链接颜色。

更改 CSS 中链接颜色的方法

以下是我们将在这篇文章中逐步讲解并提供完整示例代码的更改 CSS 中链接颜色的方法列表。

要更改 CSS 中的链接颜色，我们将使用 CSS 选择器，例如 **元素选择器**、**ID 选择器**和**类选择器**来选择链接，并使用 CSS color 属性来更改其颜色。

  • 我们在 HTML 文档中使用了 锚点 标签来创建超链接。
  • 在示例 1 中，我们使用了 **元素选择器**来使用 CSS **color** 属性更改链接颜色。
  • 在示例 2 中，我们使用了 **id** 和 **class** 选择器以及 CSS **color** 属性来更改链接颜色。

示例 1

在这个示例中，我们使用了 **"a"** 选择器来更改 CSS 中的链接颜色。

<html>
<head>
   <style>
      a{
        color:#ab352c;
      }
   </style>
</head>
<body>
   <h3>
        To Change Link Color in CSS
    </h3>
    <p>
        In this example, we are using <strong>element
        </strong> selector to change link color in 
        CSS. 
    </p>
    <h4>
        Here is a list of tutorials of front-end
        technologies available on <a href="/index.htm" 
        target="_blank">Tutorialspoint</a>.
    </h4>
    <ul>
        <li><a href="/html/index.htm" target="_blank">
            HTML</a></li>
        <li><a href="/css/index.htm" target="_blank">
            CSS</a></li>
        <li><a href="/tailwind_css/index.htm" target="_blank">
            Tailwind CSS</a></li>
        <li><a href="/javascript/index.htm" target="_blank">
            Javascript</a></li>
        <li><a href="/reactjs/index.htm" target="_blank">
            ReactJS</a></li>
    </ul>
</body>
</html>

示例 2

在这个示例中，我们使用了 **id** 和 **class** 选择器来更改 CSS 中的链接颜色。

<html>
<head>
    <style>
        #special-link {
            color: red;
        }
        .special-link {
            color: green;
        }
    </style>
</head>
<body>
    <h3>
        To Change Link Color in CSS
    </h3>
    <p>
        In this example, we are using <strong>id
        </strong> and <strong>class</strong> selector 
        to change link color in CSS.  
    </p>
    <a id="links" href = "/index.htm"> 
        Change the link color with ID Selector in CSS 
    </a>
    <br>
    <a class="links" href = "/index.htm">
        Change the link color with CLASS Selector in CSS 
    </a>
</body>
</html>

在这种更改 CSS 中链接颜色的方法中，我们将根据其不同的状态更改链接颜色。链接有四种状态：

  • a:link: 表示普通链接。
  • a:visited: 表示用户已访问过的链接。
  • a:hover: 表示鼠标悬停在其上的链接。
  • a:active: 表示单击时的链接。

示例

在这个示例中，我们使用 无序列表 (ul 和 li 标签) 创建了一个技术链接列表，并且我们使用 CSS **color** 属性根据链接的状态更改链接颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        a:link {
            color: #04af2f;
            text-decoration: none;
        }
        a:visited {
            color: #eb2c4c;
        }
        a:hover {
            color: #fdf91e;
        }
        a:active {
            color: #c63af1;
        }
    </style>
</head>
<body>
    <h3>
        To Change Link Color in CSS
    </h3>
    <p>
        In this example, we are representing each 
        state of link with different color. 
    </p>
    <h4>
        Here is a list of tutorials of front-end
        technologies available on <a href="/index.htm" 
        target="_blank">Tutorialspoint</a>.
    </h4>
    <ul>
        <li><a href="/html/index.htm" target="_blank">
            HTML</a></li>
        <li><a href="/css/index.htm" target="_blank">
            CSS</a></li>
        <li><a href="/tailwind_css/index.htm" target="_blank">
            Tailwind CSS</a></li>
        <li><a href="/javascript/index.htm" target="_blank">
            Javascript</a></li>
        <li><a href="/reactjs/index.htm" target="_blank">
            ReactJS</a></li>
    </ul>
</body>
</html>

结论

更改 CSS 中的链接颜色是增强网站视觉效果的一种简单有效的方法。通过使用选择器、伪类和属性，我们可以定位特定的链接或链接状态并更改其颜色以匹配设计。在这里，我们使用了 **CSS 选择器**和各种 **链接状态**来更改链接颜色。

更新于：2024年9月9日

5K+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告