必须为a的所有伪类（:link、:visited、:hover、:active、:focus）统一设置text-decoration: none，否则仅设a会因浏览器默认样式导致hover等状态下划线重现；需按LVHA顺序声明，并兼顾可访问性与视觉反馈。
为什么只写 a { text-decoration: none; } 还有下划线？
因为浏览器默认样式表对不同伪类单独设定了 text-decoration: underline，比如 a:hover 和 a:active 通常自带下划线，而你只覆盖了普通状态，其他状态会回退到默认值。
常见错误现象：鼠标一移上去，下划线突然出现；点击时又闪一下；已访问链接颜色变了但下划线还在。
- 必须显式声明所有相关伪类：
a:link、a:visited、a:hover、a:active、a:focus - 顺序不能错——按 LVHA 规则：
a:link→a:visited→a:hover→a:active，否则:hover可能被:visited覆盖 -
:focus别漏，否则键盘 Tab 导航时下划线会冒出来，影响可访问性
怎么写才真正“全去掉”，又不污染全局？
最稳妥的写法是合并选择器，避免重复和遗漏：
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
text-decoration: none;
}
如果你用的是现代框架（如 Bootstrap 5.3+），直接用内置工具类更省心：class="text-decoration-none"，它已预置了 hover/focus 状态处理。
立即学习“前端免费学习笔记（深入）”；
- 不推荐在父容器上写
.nav { text-decoration: none; }——text-decoration不继承，对子a无效 - 如果项目用了 CSS-in-JS 或内联样式（如 React 的
:style="{ 'text-decoration': 'none' }"），注意优先级可能被外部 class 覆盖 - 旧版 Safari 对
a:hover有缓存 bug，极少数情况需加!important临时绕过，但别长期依赖
遇到下划线“死活去不掉”，先查这三件事
不是代码写错了，而是被更高优先级规则压住了。打开 DevTools，选中链接元素，看 Computed 面板里 text-decoration 最终值从哪来。
- 是否有更具体的选择器，比如
.header a:hover或#nav li a，它们权重高于单纯a:hover - 是否引入了第三方 CSS（如 Bootstrap、Tailwind）或 UI 组件库，它们可能重置了链接样式
- 是否用了
text-decoration-line/text-decoration-thickness等新属性？这些不会被text-decoration: none覆盖，得统一用简写
语义和可访问性：去掉下划线之后，用户还知道这是链接吗？
纯靠颜色区分链接（比如蓝字无下划线）对色觉障碍用户极不友好。浏览器加下划线不只是为了“好看”，更是交互提示。
真正安全的做法是：去掉下划线，但提供其他视觉反馈。
- 加背景色变化：
a:hover { background-color: #f0f0f0; } - 加边框：
a:focus { outline: 2px solid #007bff; } - 加图标（配合 aria-hidden）：
a::after { content: "→"; margin-left: 4px; } - 如果链接实际没
href（比如用onclick模拟跳转），语义上不该用a，改用button+role="link"，天然无下划线且键盘可聚焦
最常被忽略的一点：伪类状态必须成套处理，哪怕你只想保留 hover 下划线，也要先统一清掉其他状态，再单独给 hover 加回来——否则已访问链接在 hover 时可能意外显示下划线。
