index.html里如何设置超链接的四种状态样式

必须按 link → visited → hover → active 顺序写，否则后声明的同优先级样式会覆盖前面的，导致 hover 和 active 效果被拦截或不可见。

必须按 link → visited → hover → active 顺序写，否则 hover 和 active 很可能不生效。

为什么顺序错了样式就失效？

CSS 层叠规则决定了后声明的样式会覆盖前面同优先级的规则。如果把 a:hover 写在 a:link 前面，而两者都设置了 color，那后续 a:link 的颜色就会压掉 hover 效果——尤其在鼠标刚移入的瞬间，浏览器可能仍匹配到 link 状态。

常见错误现象：

• 鼠标悬停没反应（hover 被 link 或 visited 覆盖）
• 点击瞬间无反馈（active 被 hover 拦截）
• 已访问链接颜色异常（比如始终显示未访问色，因 visited 写在了 hover 后且用了更宽泛的选择器）

移动端要注意 :active 和 :focus

在触屏设备上，:active 触发时间极短（毫秒级），肉眼几乎不可见。很多用户会误以为“点不动”。这时建议补一个 a:focus 样式，并确保 tabindex 可用：

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

a:link { color: #0055bb; text-decoration: none; }a:visited { color: #0077bb; text-decoration: none; }a:hover { color: #ff0000; text-decoration: underline; }a:active, a:focus { outline: 2px solid #00aaff; }

注意：:visited 受浏览器隐私限制，只能设置 color、background-color、border-color 等有限属性，不能读取或影响布局，也不能用 transition 动画。

要不要取消下划线？怎么安全地取消？

取消下划线本身没问题，但必须给用户提供其他视觉反馈，否则可访问性会出问题：

• 在 a:link 和 a:visited 中加 text-decoration: none
• 务必在 a:hover 或 a:focus 中恢复下划线，或改用背景色/边框/阴影等明显变化
• 避免全站统一用 * { text-decoration: none }，它会无差别干掉所有链接下划线，包括第三方组件里的

示例中漏掉 hover 下划线，是新手最常踩的坑——用户根本看不出哪里能点。

真正容易被忽略的不是怎么写，而是 :visited 的隐私限制和 :active 在移动端的不可靠性。别只盯着桌面效果测，真机点两下，才能确认反馈是否到位。