必须按 LVHA 顺序声明 a:link、a:visited、a:hover、a:active 伪类，:visited 仅支持有限样式修改；禁用链接需用 class+pointer-events 或 button 替代；推荐启用 text-decoration-skip-ink 提升可读性。
如何用 :link、:visited 控制未访问 / 已访问链接颜色
浏览器 默认给 标签加了下划线和蓝色（未访问）/ 紫色（已访问）样式，但实际项目中常需统一品牌色。必须按顺序声明这俩伪类，否则 :visited 可能被覆盖。
-
:link只匹配带href且未被访问过的链接，对空href="#"或无href的不生效 -
:visited受浏览器隐私限制：只能修改color、background-color、border-color等少数属性，不能读取或设置font-size、display等 - 推荐写法：
a:link {color: #007bff; text-decoration: none;} a:visited {color: #6c757d;}
鼠标悬停与点击时的反馈必须用 :hover 和 :active
用户需要明确感知可交互性，但很多页面只写了 :hover 却漏掉 :active，导致点击瞬间样式丢失、体验断层。
-
:hover在移入时触发，支持所有元素，但移动端仅在点击后短暂生效（iOS Safari 会延迟） -
:active仅在鼠标按下 / 手指触摸期间生效，持续时间极短，适合做按压反馈 - 注意顺序：
:link→:visited→:hover→:active（LVHA 规则），否则:hover可能覆盖:visited的颜色 - 示例（带过渡避免突兀）：
a:hover {color: #0056b3; text-decoration: underline;} a:active {transform: scale(0.98); }
禁用链接状态要用 :disabled？错，得用 [disabled] 或自定义 class
标签原生不支持 disabled 属性，写 是无效的，浏览器会忽略。真要模拟禁用态，只能靠其他方式。
- 方案一：加
class="tuc-78a64be6-7fcd5b-0 disabled tuc-78a64be6-7fcd5b-0"并手动控制样式和行为a.disabled {color: #6c757d; pointer-events: none; cursor: not-allowed;}同时 JS 中需拦截
click事件 - 方案二：改用
替代，它原生支持disabled，语义更准，无障碍也更友好 - 切勿只改样式不处理交互——视觉禁用但还能点开，是严重可用性缺陷
现代项目中 text-decoration-skip-ink 值得启用
默认下划线会切断文字笔画（尤其小写字母 g、j、y），影响可读性。Chrome/Firefox/Edge 已支持 text-decoration-skip-ink，开启后下划线自动避开字形。
立即学习 “ 前端免费学习笔记（深入）”；
- 推荐写法：
a {text-decoration: underline; text-decoration-skip-ink: auto;} - 注意兼容性：Safari 目前仍需
-webkit-text-decoration-skip: ink;前缀 - 如果要彻底去掉下划线（如按钮式链接），务必补上
text-decoration: none，否则某些浏览器（如旧版 Firefox）可能残留默认线
伪类顺序和禁用态处理最容易被跳过，特别是团队协作时，有人只写 :hover 就提交，结果 QA 发现点击没反馈、已访问链接颜色乱套——这类问题往往不是技术难点，而是检查清单没落实。
