css 伪类与链接状态_使用 :link、:visited、:active、:hover 修改链接样式

:visited 样式受限是因隐私保护，仅允许 color 等极少数静态属性，且 color 不支持透明度；必须遵循 LVHA 顺序（:link→:visited→:hover→:active），否则交互失效。

css 伪类与链接状态_使用 :link、:visited、:active、:hover 修改链接样式第1张

为什么 :visited 样式受限，连 color 都不能随便改

浏览器出于隐私保护，严格限制 :visited 伪类能修改的 CSS 属性。你不能用它设置 background-color、border、transform，甚至 color 也只允许设为不带透明度的纯色（比如 #0066cc 可以，rgba(0,102,204,0.5) 会失效）。这是防止脚本通过样式探测用户浏览历史。

可用属性极少：仅 color、background-color（部分浏览器已禁）、border-color（同上）、outline-color，且都必须是不依赖其他状态的静态值
不能搭配 transition 或 animation 使用，否则整条规则会被忽略
若想实现“已访问链接变灰”，老老实实用 color: #666，别试 filter: grayscale(1) —— 它不会生效

:hover 和 :active 的顺序不能乱，否则点击没反应

CSS 伪类有特定层叠优先级，:link 和 :visited 是初始状态，:hover 是悬停，:active 是鼠标按下瞬间。如果把 :active 写在 :hover 前面，按下时可能被 :hover 覆盖，导致视觉无反馈。

标准书写顺序必须是：:link → :visited → :hover → :active（LVHA）
现代写法可合并：用 a:not(:visited):hover 单独控制未访问链接的悬停，但 :active 仍需紧接其后
移动端要注意：:active 在触摸屏上触发短暂，若想延长反馈，得配合 touch-action: manipulation 或 JS 模拟

a:link { color: #007bff; }
a:visited { color: #666; }
a:hover { color: #0056b3; text-decoration: underline; }
a:active { color: #004080; }

如何让 :hover 效果在按钮类链接上更自然

普通文字链接加 :hover 往往只改颜色或下划线，但如果是这种当按钮用的链接，需要更明确的状态反馈。

避免只靠颜色变化：人眼对亮度差异敏感度低，建议叠加 transform: translateY(-1px) 或 box-shadow
过渡要克制：用 transition: all 0.15s ease，别写 all 0.5s —— 太慢显得卡顿
注意焦点可访问性：键盘 Tab 切换时，:focus 应与 :hover 样式一致，否则视障用户会困惑

a.btn {
  display: inline-block;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border-radius: 4px;
}
a.btn:hover,
a.btn:focus {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

使用 :link 时容易忽略的默认行为

:link 只匹配未被访问过的超链接（即 href 存在且协议合法，如 http://、https://、/about），它**不会**匹配 mailto:、tel:、javascript: 或无 href 的标签。

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

若想统一所有标签基础样式，应直接写 a，再用 :link / :visited 覆盖特定状态
:link 的权重和元素选择器相同，所以 a.my-link:link 会覆盖 a:link，但不会覆盖 .my-link
某些框架（如 Bootstrap）重置了 a 的 text-decoration，此时单独写 a:link { text-decoration: none; } 可能无效，得加 !important 或提高选择器权重