用 text-decoration: none 显式覆盖 a 元素及其伪类（:link、:visited、:hover、:active、:focus），按 LVHA 顺序声明，避免父容器设置或遗漏状态导致下划线残留。
直接用 text-decoration: none 就行，但只对 a 元素生效
浏览器默认给 a 标签加下划线，是因为用户代理样式表里写了 a { text-decoration: underline; }。所以你得显式覆盖它。注意：这个声明不会影响其他元素（比如 span 或 p）——它们本来就没下划线，设了也没效果。
常见错误是写在父容器上，比如：
.link-container { text-decoration: none; }
这完全没用，因为 text-decoration 不会继承，也不作用于子元素的链接状态。
- 必须选中链接本身：
a、a:link、a:visited、a:hover等伪类都要单独处理 - 如果用了 CSS 预处理器或框架（如 Tailwind），确认生成的类确实作用在
a标签上，而不是包裹它的div - 部分旧版 Safari 对
a:hover有缓存行为，加!important可能临时绕过（不推荐长期用）
记得补全伪类，否则鼠标悬停时下划线又回来了
很多人只写 a { text-decoration: none; }，结果 hover 时下划线突然出现——这是因为浏览器默认给 a:hover 加了 underline。CSS 伪类是独立匹配的，不自动继承普通状态的样式。
立即学习“前端免费学习笔记（深入）”；
- 至少覆盖这四个状态：
a:link、a:visited、a:hover、a:active - 顺序不能错：LVHA（link → visited → hover → active），否则
:hover可能被:visited覆盖 - 简写方式（推荐）：
a { text-decoration: none; } a:hover, a:active, a:focus { text-decoration: none; }（:focus别漏，可访问性需要）
内联样式 or 外部 CSS？优先用外部规则，避免重复写
用 style="text-decoration: none" 能立刻生效，但实际项目里很快失控：每个链接都加一遍，维护成本高，还容易漏掉伪类。
- 全局去下划线？统一写在基础 CSS 里，比如
base.css中定义a { text-decoration: none; } - 只想去掉某类链接？用语义化 class：
<a href="#" class="no-underline"></a>，再配 CSS.no-underline { text-decoration: none; } - 慎用
!important：它会破坏层叠逻辑，尤其在组件化开发中，后续想恢复下划线反而更麻烦
遇到 text-decoration: underline 还在生效？先查 computed styles
DevTools 里看到“已取消”但下划线还在，大概率是别的规则在起作用：比如父级设置了 text-decoration: underline，而子 a 没有重置；或者用了 text-decoration-line: underline（新语法，IE 不支持）但没配兼容写法。
- 打开 DevTools → Elements → 右侧 Styles 面板 → 找到
text-decoration行，点箭头展开看“computed”值 - 检查是否被更高优先级的选择器覆盖（比如 ID 选择器、行内样式、带
!important的规则） - 如果用了 CSS-in-JS 或 Shadow DOM，注意样式作用域限制，可能需要
::slotted(a)或:host ::slotted(a)
:focus 和 :active，常被当成“不影响视觉”就跳过，结果键盘导航时体验断裂。 
