直接用 text-decoration: none 去除超链接下划线常失效，因 a 标签的 :link、:visited、:hover、:active 状态各有默认样式，需全部显式声明为 none 才彻底生效，且需兼顾可访问性与视觉区分。
直接用 text-decoration: none 就能去掉超链接下划线，但只写这一句常常失效——不是代码不对，而是被其他样式或伪类覆盖了。
为什么 a { text-decoration: none } 有时不起作用
浏览器默认给 a 标签设置了 text-decoration: underline，但更关键的是：它只对未访问过的链接（:link）生效；已访问过的（:visited）、悬停时（:hover）、激活时（:active）都有独立样式。如果你只写了 a，那 a:hover 还会悄悄把下划线加回来。
- 检查开发者工具里实际生效的规则，常会看到
a:hover或nav a这类更高优先级的选择器覆盖了你的设置 -
a选择器权重低，父容器如.header a或带!important的规则都能压过它 - 某些 CSS 重置库（如 Normalize.css）或框架（如 Bootstrap）会主动设置
a:hover下划线，得一并处理
真正管用的写法：覆盖所有伪类状态
要彻底去掉下划线，必须显式声明全部相关状态，否则鼠标移上去又出来了。
a,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
}
- 顺序不重要，但缺任何一个都可能在对应状态下漏出下划线
- 如果只针对某类链接（比如导航栏），建议用类名限定：
.nav-link:link, .nav-link:visited, ... - 避免滥用
!important，它会让后续维护变困难；优先靠选择器权重或更具体的作用域控制
内联 style 能不能用？能，但别乱用
单个链接临时去下划线，<a href="#" style="text-decoration: none">文字</a> 确实有效，但有明显副作用：
立即学习“前端免费学习笔记（深入）”；
- 无法复用，每加一个链接都要重复写一遍
- 破坏 HTML 与 CSS 关注点分离，后期改配色或交互逻辑时得逐个改标签
- 若该链接还用了 JS 动态添加 class，内联样式会阻碍 class 中的
text-decoration生效 - 可访问性检测工具（如 axe）可能报出「内联样式阻碍主题切换」警告
去掉下划线后，用户还能认出这是链接吗
这是容易被跳过的实际问题。纯文字链接没了下划线，色弱用户、小字号屏、强光环境下很可能点错或忽略。
- WCAG 要求链接必须有至少两种视觉区分方式：颜色 + 下划线 / 边框 / 背景色 / 图标等
- 稳妥做法是保留
a:hover的下划线，或改用border-bottom: 1px solid currentColor替代原生下划线（更易控制粗细/间距） - 关键操作链接（如“提交”“删除”）务必加图标或明确动词，别只靠颜色变化暗示可点击
最简方案就是写全伪类，但真正难的不是写代码，是判断这个链接在当前上下文中是否还需要其他视觉线索——下划线只是手段，用户能可靠识别并操作才是目的。
