CSS去除链接下划线方法

去除CSS链接下划线看似只需一行`text-decoration: none`，实则暗藏诸多陷阱：必须显式覆盖`a`元素及其全部关键伪类（`:link`、`:visited`、`:hover`、`:active`、`:focus`），严格遵循LVHA顺序声明，避免因遗漏状态导致悬停或聚焦时下划线意外重现；切忌在父容器上设置该属性（因其不可继承且不作用于子链接），也要警惕预处理器、框架或Shadow DOM带来的作用域干扰；兼顾可访问性（`:focus`不可或缺）、维护性（优先外部统一规则而非内联样式）与兼容性（注意`text-decoration-line`等新语法），真正难点不在代码本身，而在于对浏览器默认样式机制、CSS层叠逻辑和交互细节的系统性理解。

直接用 text-decoration: none 就行，但只对 a 元素生效

浏览器默认给 a 标签加下划线，是因为用户代理样式表里写了 a { text-decoration: underline; }。所以你得显式覆盖它。注意：这个声明不会影响其他元素（比如 span 或 p）——它们本来就没下划线，设了也没效果。

常见错误是写在父容器上，比如：

.link-container { text-decoration: none; }

这完全没用，因为 text-decoration 不会继承，也不作用于子元素的链接状态。

• 必须选中链接本身：a、a:link、a:visited、a:hover 等伪类都要单独处理
• 如果用了 CSS 预处理器或框架（如 Tailwind），确认生成的类确实作用在 a 标签上，而不是包裹它的 div
• 部分旧版 Safari 对 a:hover 有缓存行为，加 !important 可能临时绕过（不推荐长期用）

记得补全伪类，否则鼠标悬停时下划线又回来了

很多人只写 a { text-decoration: none; }，结果 hover 时下划线突然出现——这是因为浏览器默认给 a:hover 加了 underline。CSS 伪类是独立匹配的，不自动继承普通状态的样式。

• 至少覆盖这四个状态：a:link、a:visited、a:hover、a:active
• 顺序不能错：LVHA（link → visited → hover → active），否则 :hover 可能被 :visited 覆盖
• 简写方式（推荐）：

  a { text-decoration: none; }
  a:hover, a:active, a:focus { text-decoration: none; }
  

  （:focus 别漏，可访问性需要）

内联样式 or 外部 CSS？优先用外部规则，避免重复写

用 style="text-decoration: none" 能立刻生效，但实际项目里很快失控：每个链接都加一遍，维护成本高，还容易漏掉伪类。

• 全局去下划线？统一写在基础 CSS 里，比如 base.css 中定义 a { text-decoration: none; }
• 只想去掉某类链接？用语义化 class：，再配 CSS .no-underline { text-decoration: none; }
• 慎用 !important：它会破坏层叠逻辑，尤其在组件化开发中，后续想恢复下划线反而更麻烦

遇到 text-decoration: underline 还在生效？先查 computed styles