正在加载...

CSS 链接

链接是人们在页面间移动的方式。在 CSS 中你为 a 元素及其状态设置样式 — 未访问、已访问、悬停与按下 — 让链接看起来可点、随交互变化，并保持可读。

一眼看清链接状态

📊 链接状态工具箱

状态 何时生效
a / a:link 默认 / 未访问链接
a:visited 访客已经打开过的链接
a:hover 指针在链接上
a:active 链接正在被按下 (mousedown)
text-decoration 下划线开/关 — 常见链接控制

浏览器常记住一个有用顺序，绰号 LVHA: :link、:visited、:hover、:active。按此顺序写规则，可减少后面状态被意外盖掉。

设置基础链接样式

从颜色和是否下划线开始。许多现代设计去掉默认下划线，再在悬停时加回来。

基础链接样式

css
CSS Code 
a {
color: #0b5fff;
text-decoration: none;
}

已访问链接

:visited 可略微改色，让回头访客认出熟悉路径。变化保持克制 — 隐私限制了 visited 可设置的样式。

Visited 色调

css
CSS Code 
a:visited {
color: #5b4b8a;
}

悬停反馈

:hover 是最清晰的日常信号。变色、下划线或两者并用，表示“可交互”，不必吵闹。

悬停下划线

css
CSS Code 
a:hover {
color: #0842b8;
text-decoration: underline;
}

active — 按下瞬间

:active 在链接被按下时生效。略深一点的颜色给出短暂“点击”感。

Active 按下

css
CSS Code 
a:active {
color: #062e80;
}

平静的导航链接习惯

把 LVHA 状态写在一起，保持悬停明确，且不要只为扁平外观就抹掉焦点轮廓。键盘用户需要可见的焦点提示。

安静的导航链接

css
CSS Code 
nav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}

nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}

nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

自己动手

  1. 设置基础 a 颜色和 text-decoration: none。
  2. 添加颜色略不同的 a:visited。
  3. 在 a:hover 加下划线并加深颜色。
  4. 在 a:active 再略加深。
  5. 按 LVHA 顺序设置 nav a，并保留 :focus-visible 轮廓。

常见错误

  • 把 :hover 写在 :link / :visited 前面导致部分状态失效
  • 去掉下划线以及任何表明这是链接的线索
  • 段落每个词都霓虹悬停
  • 链接上写 outline: none 却无替代焦点样式
  • 把本课与 text-shadow / 省略号混在一起（上一课）

小结

  • 用 a 与 :link、:visited、:hover、:active 设置链接样式
  • LVHA 顺序有助于层叠按预期工作
  • 颜色与 text-decoration 是日常控件
  • 悬停要清晰；已访问变化保持克制
  • 为键盘导航保留可见焦点样式

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 30 的 35
Css 教程