17370845950

必须按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="disabled" 并手动控制样式和行为

  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 发现点击没反馈、已访问链接颜色乱套——这类问题往往不是技术难点，而是检查清单没落实。