CSS链接样式怎么设置：颜色、下划线与悬停效果

链接样式不只是把文字改成蓝色。合适的颜色和下划线能让读者识别可点击内容，悬停与键盘焦点状态能提示当前交互位置，访问后状态则可帮助区分已读链接。设置时还要考虑触屏设备、颜色对比度、浏览器对访问记录的隐私保护，以及外链安全等边界。

本文从最常见的文本链接开始，逐步介绍颜色、下划线、悬停、焦点和访问后样式，并提供可以直接运行的 HTML 与 CSS 示例。示例均可放入一个 HTML 文件中查看；代码中的 HTML 标签已按要求转义。

先理解链接元素与 CSS 选择器

网页链接通常使用 <a> 元素，并通过 href 指定目标地址。只有设置了 href 的 <a> 才通常被浏览器视为可导航的超链接，也会匹配 :link、:visited 等链接伪类。没有 href 的 <a> 不应被当作按钮或普通文本的替代品。

<a href="https://example.com/">访问示例网站</a>

<style>
a {
  color: #0757a6;
  text-decoration: underline;
}
</style>

上例用元素选择器 a 设置了页面中所有链接的文字颜色和下划线。实际项目通常需要更精确地限定范围，例如只设置正文中的链接，避免导航栏、按钮式链接也被同一组规则影响：

<main class="article-content">
  <p>了解更多信息，请查看
    <a href="/guide/">使用指南</a>。
  </p>
</main>

<style>
.article-content a {
  color: #0757a6;
  text-decoration: underline;
}
</style>

设置链接颜色：不能只靠颜色传达含义

使用 color 属性可以设置链接文字颜色，值可以是命名颜色、十六进制颜色、rgb()、hsl() 等 CSS 颜色表示法。以下示例使用十六进制值：

a {
  color: #0757a6;
}

颜色应与背景形成足够对比。按照 WCAG 2.2 的 AA 对比度要求，普通文字与背景的对比度通常至少为 4.5:1；大号文字通常至少为 3:1。“大号文字”指至少 18pt 常规字重，或至少 14pt 粗体。对比度应按最终文字颜色和实际背景计算；透明度、背景图片、渐变或覆盖层都可能影响结果。

正文里的链接尤其不宜只用颜色与普通文字区分。如果用户无法辨别色相，颜色差异可能不明显。保留默认下划线，或采用其他持续可见、清楚的标记，通常比仅在鼠标悬停时才出现下划线更稳妥。颜色可以作为辅助信号，但不应成为唯一信号。

控制下划线：常用属性与边界

text-decoration 可以设置文字装饰。text-decoration: underline 表示添加下划线；text-decoration: none 则移除下划线。移除后应提供足够明显的其他提示，并确认键盘焦点状态依然可见。

a {
  text-decoration: underline;
}

.navigation a {
  text-decoration: none;
}

.navigation a:hover,
.navigation a:focus-visible {
  text-decoration: underline;
}

下划线的粗细、颜色和偏移可分别通过 text-decoration-thickness、text-decoration-color 和 text-underline-offset 控制。这些属性用于调整视觉效果，不会改变链接的可点击范围或导航功能。

.article-content a {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

currentColor 表示使用元素当前的文字颜色作为装饰颜色，便于颜色保持一致。em 等相对单位会随字体大小变化，适合需要跟随文字缩放的场景。不要把下划线紧贴字形或设得过粗，以免影响阅读；也要在目标浏览器中检查实际显示效果。

如果希望悬停时移除下划线，可以使用 text-decoration: none，但这通常会削弱链接的识别度。尤其是正文中夹在段落里的链接，建议保持下划线常驻，再通过改变颜色或下划线颜色强化悬停反馈。

悬停效果：使用 :hover 增加反馈

:hover 匹配指针设备将鼠标等指针悬停在元素上的状态。它适合添加颜色变化、下划线变化或轻微的背景提示。例如：

a {
  color: #0757a6;
  text-decoration: underline;
}

a:hover {
  color: #043b73;
  text-decoration-thickness: 0.12em;
}

悬停样式应与默认状态有所区别，但不必使用闪烁、强烈位移或过度动画。访问链接时，文字仍应清晰可读。如果通过背景色突出链接，也需要重新检查文字与背景之间的对比度。

触屏设备通常没有持久的鼠标悬停状态，因此不能把关键说明、链接文字或主要操作只放在 :hover 中。可以用媒体查询判断设备是否支持悬停能力，再只为这类设备增加悬停效果：

@media (hover: hover) {
  a:hover {
    color: #043b73;
  }
}

这只是对悬停样式的渐进增强，不代表所有触屏设备都不支持悬停，也不能用来判断设备类型或替代可访问性测试。链接的默认状态仍须足以表明其用途。

键盘焦点：不要只设计鼠标状态

使用键盘浏览网页的人会通过 Tab 键移动焦点。:focus 匹配当前获得焦点的元素；较新的 :focus-visible 可在浏览器认为应显示键盘焦点提示时匹配，常用于避免鼠标点击后出现不必要的焦点环，同时保留键盘操作所需的提示。

a:focus-visible {
  outline: 3px solid #b54708;
  outline-offset: 3px;
}

outline 绘制在元素边缘外侧，通常不会占用布局空间。不要为了“页面更干净”而直接清除焦点轮廓，却不提供替代样式。若设计确实需要自定义焦点效果，应确保它足够醒目、与周围背景有明显区分，并在键盘操作下实际检查。

有些项目会同时写 :hover 和 :focus-visible，让鼠标与键盘用户获得相近的反馈。注意，:focus 与 :focus-visible 并非完全等价：前者覆盖所有获得焦点的情况，后者的显示判断由浏览器依据输入方式和启发式规则处理。

访问后状态：:visited 有重要限制

:visited 用于匹配浏览器记录为已访问的链接。可以用它设置颜色，让用户区分访问前后的链接：

a:link {
  color: #0757a6;
}

a:visited {
  color: #6b3fa0;
}

浏览器对 :visited 的样式作了隐私限制，避免网页通过脚本探测用户的浏览历史。它允许影响的 CSS 属性范围有限，常见的文字和边框颜色可以设置，但不能指望借此随意改变布局、尺寸或其他视觉属性。即使某些颜色属性可应用，浏览器通过脚本读取计算样式时也会进行限制，不能可靠地据此判断用户是否访问过某个地址。

因此，:visited 适合提供轻量的视觉提示，不适合用于权限判断、个性化安全决策、统计用户浏览记录或触发敏感逻辑。访问状态由浏览器管理，实际呈现也可能受浏览器策略影响。若某个“已读”状态具有业务含义，应由应用在获得适当依据后管理，而不是把 CSS 伪类当作数据接口。

伪类顺序：避免规则相互覆盖

常见的链接伪类包括 :link（未访问链接）、:visited（已访问链接）、:hover（悬停状态）和 :active（激活状态，例如按下鼠标时）。它们的规则可能同时匹配，因此声明顺序与选择器优先级会影响最终样式。

需要分别定义这几个状态时，常见顺序是 link、visited、hover、active，也就是常说的 LVHA 顺序：

a:link {
  color: #0757a6;
}

a:visited {
  color: #6b3fa0;
}

a:hover {
  color: #043b73;
}

a:active {
  color: #b42318;
}

a:focus-visible {
  outline: 3px solid #b54708;
  outline-offset: 3px;
}

:focus-visible 不属于 LVHA 的四个状态之一。将焦点样式单独写出，有助于保证键盘提示清楚。若使用更具体的选择器，例如 .article-content a:hover，它的优先级会高于单独的 a:visited；这时即使书写了 :visited，访问后的颜色仍可能被其他规则覆盖。排查样式时要同时检查选择器优先级、规则顺序，以及是否有内联样式或 !important。

一套可直接使用的正文链接样式

下面的完整片段包含正文、默认链接状态、访问后颜色、悬停效果、键盘焦点和小屏幕下的基础排版。将其保存为 HTML 文件即可在浏览器中测试。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>链接样式示例</title>
  <style>
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.7;
      color: #202124;
      background: #fff;
    }

    .article-content {
      max-width: 42rem;
      margin-inline: auto;
    }

    .article-content a:link {
      color: #0757a6;
      text-decoration: underline;
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.16em;
    }

    .article-content a:visited {
      color: #6b3fa0;
    }

    .article-content a:hover {
      color: #043b73;
      text-decoration-thickness: 0.12em;
    }

    .article-content a:active {
      color: #b42318;
    }

    .article-content a:focus-visible {
      outline: 3px solid #b54708;
      outline-offset: 3px;
      border-radius: 2px;
    }

    @media (hover: hover) {
      .article-content a:hover {
        text-decoration-color: currentColor;
      }
    }

    @media (max-width: 40rem) {
      body {
        padding: 1rem;
      }
    }
  </style>
</head>
<body>
  <main class="article-content">
    <h1>链接样式示例</h1>
    <p>
      请阅读<a href="https://example.com/">示例网站</a>上的相关说明，
      或查看<a href="/guide/">站内使用指南</a>。
    </p>
  </main>
</body>
</html>

测试时可以用鼠标悬停、按住链接、用 Tab 键移动焦点，并访问链接后重新查看颜色变化。还要在不同浏览器、背景色和缩放比例下检查，而不是只依据开发者工具中的单一预览。

导航栏、按钮式链接与正文链接应区别处理

不同用途的链接可以有不同视觉设计。正文链接通常需要清楚、持续可见；导航链接可能依靠所在菜单的位置和间距建立层级；按钮式链接则更像一个操作入口，常见做法是给链接增加背景、内边距和圆角。但按钮式外观不会把链接变成按钮：如果操作是跳转到页面或资源，使用 <a href="...">；如果操作是提交表单、展开面板等，则应根据实际行为考虑使用 <button>。

.site-nav a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  color: #202124;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  text-decoration: underline;
}

.button-link {
  display: inline-block;
  padding: 0.65rem 1rem;
  color: #fff;
  background: #0757a6;
  border-radius: 0.35rem;
  text-decoration: none;
}

.button-link:hover {
  background: #043b73;
}

若移除导航链接或按钮式链接的下划线，应通过位置、对比度、边框、背景或其他清楚的视觉方式标明其可交互属性，并确保焦点状态明显。给所有 a 使用同一套全局规则，再靠更多的特殊覆盖修补，往往会让样式难以维护；按内容区域、导航区域和操作组件划分选择器通常更易检查。

外链安全：CSS 不负责保护链接目标

CSS 只能改变外观，不会验证链接地址，也不会限制链接打开后能做什么。需要在 HTML 层面检查链接目标，并根据场景决定打开方式。通常不应仅为“看起来更方便”就把所有外链都设为新标签页；如果使用 target="_blank"，可以明确写出 rel="noopener"，以避免新页面通过 window.opener 操作来源页面。现代浏览器对 target="_blank" 已普遍隐式采用类似 noopener 的行为，但显式声明仍能清楚表达意图、兼顾旧环境。

<a
  href="https://example.com/"
  target="_blank"
  rel="noopener"
>在新标签页打开示例网站</a>

rel="noreferrer" 会阻止浏览器发送来源页面的 Referer 信息，并包含 noopener 的效果。是否需要隐藏来源信息，应依据实际隐私和分析需求决定；它不是普遍必需的装饰属性。也不要把 rel 属性误认为能验证 URL 是否可信。

链接地址应由可信来源生成或经过合适的校验。尤其是把用户输入拼进 href 时，应在应用层按业务规则限制允许的地址和协议；CSS 无法阻止危险协议或不可信目标。链接文字也应准确描述去向或行为，避免大量使用脱离语境的“点击这里”。

常见错误与排查方法

• 移除下划线后没有其他提示。正文链接可能与普通文字难以区分。保留常驻下划线，或提供持续可见的替代标识。
• 只写了悬停样式。键盘用户和触屏用户不能稳定依赖鼠标悬停。默认状态也必须能识别，键盘焦点则要单独检查。
• 只换颜色，不检查对比度。颜色值看起来醒目，不等于与实际背景具有足够对比。对渐变、图片或半透明背景尤其要检查最终呈现。
• 认为 :visited 能保存或读取浏览记录。该伪类受隐私限制，不是脚本接口，也不适合权限、埋点或业务判断。
• 误以为所有链接都会匹配 :link。:link 与 :visited 用于符合链接语义的元素；对普通文本或没有 href 的元素使用它们，不会得到预期效果。
• 忽略选择器优先级。更具体的选择器可能覆盖后写的规则。可先在浏览器开发者工具里检查最终生效的声明，再决定是否缩小规则范围。
• 用链接伪装按钮，或用按钮伪装导航。应依据实际功能选 HTML 元素：导航使用链接，执行动作使用按钮。外观由 CSS 调整，语义和键盘行为则由正确的元素提供。

实用检查清单

• 默认状态下，用户能否看出哪些正文内容是链接？
• 文字颜色与背景的对比度是否符合适用要求？
• 悬停效果是否只是增强反馈，而不是唯一的识别方式？
• 用键盘 Tab 键操作时，焦点指示是否清楚且没有被裁切？
• 访问后颜色是否仍然易读，并且没有被更高优先级规则意外覆盖？
• 在触屏设备、页面缩放和不同浏览器中，链接是否仍易于操作？
• 外链地址、打开方式与 rel 属性是否符合实际需求？

一套可靠的链接样式，通常从清晰的默认状态开始，再按需增加访问后、悬停、按下和键盘焦点反馈。下划线和颜色负责识别，焦点样式负责支持键盘操作，HTML 语义与链接属性负责导航行为。把这些职责分清，样式会更容易维护，也不容易把视觉效果误当成安全机制。