text-decoration: none 是唯一可靠、语义正确且兼容的去下划线方式；需显式覆盖 a:link、a:visited、a:hover、a:active、a:focus 等伪类，因 text-decoration 不继承且各状态有独立默认样式。
text-decoration: none 是唯一可靠、语义正确且浏览器兼容的去下划线方式。其他方法（如 border-bottom: 0 或 outline: none）不作用于链接的文本装饰，纯属误用。
为什么只写 a { text-decoration: none; } 还会看到下划线？
因为浏览器对不同伪类状态有独立默认样式：a:hover 默认是 underline，a:visited 可能被 UA 样式覆盖，而 CSS 不继承 text-decoration —— 写在父容器上完全无效。
- 必须显式覆盖所有相关状态，至少包括：
a:link、a:visited、a:hover、a:active - 顺序很重要：按 LVHA（
:link→:visited→:hover→:active）声明，否则:hover可能被:visited规则意外覆盖 - 别漏掉
:focus：可访问性要求键盘聚焦时也应无下划线，否则 WCAG 2.4.7 失败
只想去掉某一块区域里的链接下划线？用更具体的选择器
比如移除页脚内所有链接的下划线，不能靠给 footer 加 text-decoration: none，那没用——text-decoration 不继承。
- 正确写法：
footer a、footer a:hover、footer a:visited等分别设置text-decoration: none - 如果页脚里还有嵌套结构（如
footer nav a），确保选择器权重足够高，避免被全局规则覆盖 - 警惕“图片链接”陷阱：有人对
footer a img设text-decoration: none，但img元素根本不支持该属性，下划线始终来自a本身
inline style 和 class 方案怎么选？
内联样式 style="text-decoration: none" 能立刻生效，但无法控制伪类状态，且维护成本爆炸——每个链接都得重复写四遍（:hover 等还得另加 onmouseover JS 模拟，极不推荐）。
立即学习“前端免费学习笔记（深入）”；
- 项目级统一去下划线：直接在基础 CSS（如
base.css）里写a { text-decoration: none; }+ 伪类组合 - 局部控制：用语义化 class，如
<a href="#" class="no-underline"></a>，再配.no-underline, .no-underline:hover, .no-underline:visited { text-decoration: none; } - 慎用
!important：它会破坏后续通过 JS 动态加样式的可能性，组件库中尤其难调试
最常被忽略的一点：DevTools 里看到 text-decoration: none 显示为“已取消”，但下划线还在——大概率是某处写了 text-decoration: underline 且选择器权重更高，或者父级设置了 text-decoration: underline 而子 a 没重置。查 computed styles 时，重点看哪条规则真正生效，而不是只盯 declaration 面板。
