CSS不同状态样式设置技巧

下面这段是安全、可预期的写法：

a:link { color: #0066cc; text-decoration: none; }
a:visited { color: #666; }
a:hover { color: #ff6b35; text-decoration: underline; }
a:active { color: #004499; }

这些写法容易出问题：

• 把 a:hover 放在 a:visited 前面 → 已访问链接悬停无反应
• 只写 a:hover 没写 a:link → 未访问链接可能继承父级颜色，导致悬停前后颜色差异不可控
• 给 :visited 设置 background-image 或 font-size → 浏览器直接忽略，不报错也不生效

移动端和键盘用户的兼容注意点

:active 在触摸设备上行为不稳定：部分 Android 浏览器需要额外 CSS 触发“激活态”，iOS Safari 则默认禁用 :active 样式以避免误触。若需确保点击反馈，建议补充：

• 在 中添加
• 给 a 元素加 cursor: pointer（提升桌面端识别度）
• 必要时用 JavaScript 监听 touchstart / touchend 模拟激活态（:active 不可靠时的兜底方案）

最常被忽略的是 :visited 的隐私限制——它不是“失效”，而是被浏览器主动阉割了大部分样式能力。别试图用它做视觉区分以外的事，比如显示图标或改变布局，那注定不会如你所愿。

以上就是《CSS不同状态样式设置技巧》的详细内容，更多关于的资料请关注golang学习网公众号！