用 a { text-decoration: none; } 可全局去除超链接下划线；若失效，需检查优先级、hover 状态、父级样式或使用 text-decoration-line: none 精确控制。
如何用 CSS 去掉超链接的下划线
默认情况下，<a> 标签会显示蓝色带下划线的样式，这是浏览器内置样式。要去掉它，必须显式覆盖 text-decoration 属性。
最简写法：a { text-decoration: none; }
这是最常用、最直接的方式，适用于全局去掉所有超链接下划线：
a {
text-decoration: none;
}- 必须写在你自己的 CSS 中（内联、
<style>或外链 CSS），且权重不低于浏览器默认样式（通常没问题） - 它只影响下划线，不改变颜色或鼠标悬停行为
- 如果只想去掉特定链接，推荐加类名，比如
<a class="no-underline">，再写.no-underline { text-decoration: none; }
为什么有时候写了没生效？常见干扰项
以下情况会导致 text-decoration: none 失效或被覆盖：
- 其他 CSS 规则优先级更高，比如
a:hover { text-decoration: underline; }—— 要一并处理 hover 状态 - 使用了
!important的第三方样式（如某些 UI 框架），需检查计算样式（DevTools 的 Computed 面板） - 链接嵌套在富文本编辑器输出中（如
<p><a href="#">xxx</a></p>），父级可能设置了text-decoration: underline并继承下来（注意：text-decoration不继承，但视觉上可能被误判；真正要查的是是否父元素用了text-underline-offset或伪元素模拟下划线）
进阶控制：只去下划线，保留其他装饰
如果你只想移除下划线，但希望保留上划线、删除线等其它装饰，不能依赖 none —— 因为它会清空全部。此时需用 text-decoration-line（现代浏览器支持）：
立即学习“前端免费学习笔记（深入）”；
a {
text-decoration-line: overline; /* 只加一条上划线 */
/* 或完全关闭下划线： */
text-decoration-line: none;
}-
text-decoration-line: none和text-decoration: none效果一致，但前者更精确，且可与text-decoration-color、text-decoration-thickness组合使用 - 旧版 Safari（text-decoration-line，生产环境建议仍以
text-decoration: none为主 - 若需兼容老浏览器又想精细控制，可用伪元素方案，但代价是语义性下降，一般没必要
真正要注意的不是“怎么写”，而是“写在哪”和“有没有被覆盖”。打开 DevTools，选中链接，看 text-decoration 是否被 strike-through 或灰色显示 —— 那才是问题真正的藏身之处。
