最常用且有效的写法是a { text-decoration: none; }，它直接移除所有<a>标签默认下划线，不改变颜色和点击功能；但需注意样式优先级、伪类状态覆盖及可访问性问题。
a { text-decoration: none; } 是最常用且有效的写法
直接在 CSS 里写 a { text-decoration: none; } 就能去掉所有 <a> 标签的默认下划线。它不改变颜色、不干扰点击行为，只移除装饰线。
注意两点：一是必须确保这条规则实际生效（比如没被更高优先级样式覆盖），二是它只作用于普通状态，a:hover、a:visited 等伪类仍可能带下划线，需要单独处理。
为什么写了 text-decoration: none 却没生效？
常见失效原因不是语法错，而是样式被覆盖或遗漏状态：
-
a:hover或a:active单独设置了text-decoration: underline，结果悬停时又出现下划线 - 第三方 UI 库（如 Bootstrap）或富文本编辑器输出的 HTML 套了父容器，而该容器设了
text-decoration: underline，视觉上像继承了——其实text-decoration不继承，但伪元素或text-underline-offset可能造成类似效果 - 用了
!important的外部样式，而你的规则没加!important，权重不够 - 浏览器 DevTools 的 Computed 面板里能看到最终生效的样式来源，比猜更准
只想去掉下划线，但保留上划线或删除线
用 text-decoration: none 会清空所有装饰，包括 overline 和 line-through。如果只想关掉下划线，其他不动，得用更精确的属性：
立即学习“前端免费学习笔记（深入）”；
现代浏览器支持 text-decoration-line，可单独控制：
a {
text-decoration-line: none; /* 只关下划线，不影响其他 line 类型 */
/* 或者只开上划线：text-decoration-line: overline; */
}兼容性方面，text-decoration-line 在 Chrome 64+、Firefox 70+、Safari 12.1+ 支持；IE 完全不支持，Edge 79+ 起支持。若需兼容旧版 IE，还是得用传统 text-decoration: none 并接受“全清”逻辑。
去掉下划线后，别忽略可访问性问题
纯文字链接没了下划线，色弱用户或高对比度模式下可能完全看不出哪段可点。这不是“美化”选项，而是 WCAG 明确要求的感知性（Perceivable）问题：
- 至少保证链接文字与正文对比度 ≥ 4.5:1，可用 Chrome DevTools 的 Lighthouse 面板一键检测
- 对关键操作链接（如“确认支付”“永久删除”），别只靠颜色区分，加图标或文字提示更稳妥
- 保留
a:hover下划线，或改用背景色/边框变化作为交互反馈，比全时段隐藏更安全
真正难的不是怎么去掉下划线，是怎么在去掉之后，仍让每个人都能明确识别出“这是个链接”。
