最安全方案是使用 Bootstrap 5.3+ 内置的 text-decoration-none 类，它统一处理默认、hover 和 focus 状态，避免手动覆盖失效及可访问性风险；直接写 a { text-decoration: none; } 最危险，会破坏按钮、导航等组件的下划线及可访问性反馈。
直接写 a { text-decoration: none; } 就能去掉下划线，但实际用起来常失效——不是代码写错了，而是被其他样式覆盖、伪类没处理全，或者可访问性被忽略了。
为什么 a { text-decoration: none; } 有时不起作用
浏览器默认给 a 元素设了 text-decoration: underline;，但这个样式只作用于未访问状态（:link），而你写的规则可能没覆盖到 :visited、:hover 或 :active 状态。
- 常见错误现象：
a { text-decoration: none; }写了，鼠标一悬停下划线又出来了 - 真正生效的写法要显式覆盖所有伪类：
a, a:link, a:visited, a:hover, a:active { text-decoration: none; } - 如果用了 CSS 框架（比如 Bootstrap），它的样式权重更高，得加
!important或提高选择器 specificity（例如写成body a） -
text-decoration-line: none是更精确的属性，但兼容性略差（IE 不支持），日常开发优先用text-decoration: none
只想去掉某几个链接的下划线，别影响全局
给特定链接加 class，比改全局 a 更安全，也更容易维护。
- HTML 中写：
<a href="#" class="no-underline">无下划线链接</a> - CSS 中写：
.no-underline { text-decoration: none; } - 如果这个链接还要响应 hover，记得补上：
.no-underline:hover { text-decoration: none; }（否则 hover 时可能恢复下划线） - 避免用内联 style：
<a href="#" style="text-decoration: none;">—— 难复用、难调试、没法统一管理
去掉下划线后，用户还能看出这是链接吗
这是最容易被忽略的点：纯文字链接没了下划线，色弱用户或低对比度屏幕上可能完全无法识别它是可点击的。
立即学习“前端免费学习笔记（深入）”；
- WCAG 要求链接必须有足够视觉区分，不能只靠颜色（比如蓝色文字 + 无下划线 = 对很多人不可见）
- 稳妥做法是换一种提示方式：
a:hover { border-bottom: 1px solid currentColor; }或a:hover { background-color: #f0f0f0; } - 检查颜色对比度：链接文字与背景的对比度至少要达到 4.5:1，Chrome DevTools 的 Lighthouse 面板能自动检测
- 关键操作链接（如“确认删除”“立即支付”）建议加图标或文字说明，别只依赖样式变化
真正麻烦的从来不是怎么去掉下划线，而是去掉之后，怎么让用户依然知道“这儿能点”。样式可以藏，但可感知性不能妥协。
