使用 CSS 移除链接下划线：详细教程-html教程-PHP中文网

使用 CSS 移除链接下划线：详细教程

DDD

发布： 2025-09-06 21:32:02

原创

257人浏览过

使用 css 移除链接下划线：详细教程

本文将详细介绍如何使用 CSS 移除链接的默认下划线，特别是在鼠标悬停或激活状态下。我们将通过代码示例和详细解释，帮助你理解如何精确控制链接的样式，并解决特定情况下下划线无法移除的问题，例如hover时图片链接出现下划线。

移除链接下划线的基本方法

默认情况下，HTML 链接（<a> 标签）会带有下划线，以表示其可点击性。要移除这些下划线，可以使用 CSS 的 text-decoration 属性，并将其设置为 none。

以下是一个基本的 CSS 示例，展示如何移除所有链接的下划线：

a {
  text-decoration: none;
}

登录后复制

这段代码会移除页面上所有 <a> 标签的默认下划线。

立即学习“前端免费学习笔记（深入）”；

控制不同状态下的链接样式

链接有几种不同的状态，包括：

a:link: 未访问的链接
a:visited: 已访问的链接
a:hover: 鼠标悬停在链接上
a:active: 链接被点击时

你可以针对这些状态分别设置样式，以实现更精细的控制。例如，你可以移除所有状态下的下划线，同时改变鼠标悬停时的颜色：

a:link {
  text-decoration: none;
  color: blue;
}

a:visited {
  text-decoration: none;
  color: purple;
}

a:hover {
  text-decoration: none;
  color: red;
}

a:active {
  text-decoration: none;
  color: green;
}

登录后复制

解决特定情况下的下划线问题

在某些情况下，即使你设置了 text-decoration: none;，下划线可能仍然出现。这通常是因为样式规则的优先级问题，或者更具体的选择器覆盖了你的设置。

例如，如果你的 HTML 结构如下：

豆包AI编程

豆包推出的AI编程助手

483

查看详情

<footer>
  <a href="https://www.example.com">
    <img src="image.jpg" alt="Example Image">
  </a>
</footer>

登录后复制

并且你的 CSS 如下：

a:hover {
  text-decoration: underline;
}

footer a:hover img {
  border-color: white;
  text-decoration: none; /* 这行代码无效 */
}

登录后复制

问题在于 a:hover 的规则优先级高于 footer a:hover img，导致下划线仍然显示。 footer a:hover img 选择器针对的是图片本身，而不是链接。

解决方案: 你需要直接针对 footer a:hover 选择器来移除下划线。

footer a:hover {
  text-decoration: none;
}

登录后复制

这个规则会覆盖全局的 a:hover 规则，确保在 footer 中的链接在鼠标悬停时没有下划线。

完整示例

以下是一个完整的示例，展示如何移除链接的下划线，并解决特定情况下的问题：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Remove Underline</title>
  <style>
    a:link {
      color: blue;
      text-decoration: none;
    }

    a:visited {
      color: purple;
      text-decoration: none;
    }

    a:hover {
      color: red;
      text-decoration: none; /* 移除所有链接的 hover 下划线 */
    }

    a:active {
      color: green;
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: none; /* 移除 footer 中链接的 hover 下划线 */
    }

    footer img {
      width: 100px;
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <a href="#">普通链接</a>

  <footer>
    <a href="#">
      <img src="https://via.placeholder.com/100" alt="Placeholder Image">
    </a>
  </footer>

</body>
</html>

登录后复制

在这个示例中，我们首先移除了所有链接的默认下划线，然后针对 footer 中的链接，专门移除了鼠标悬停时的下划线。