a标签超链接伪类样式设置全解析

用户需要明确感知可交互性，但很多页面只写了 :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

• 方案一：加 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）可能残留默认线

以上就是《a标签超链接伪类样式设置全解析》的详细内容，更多关于的资料请关注golang学习网公众号！