CSS如何去除链接下划线_text-decoration属性的基础用法-css教程-PHP中文网

text-decoration: none 是唯一可靠、语义正确且兼容的去下划线方式；需显式覆盖 a:link、a:visited、a:hover、a:active、a:focus 等伪类，因 text-decoration 不继承且各状态有独立默认样式。

css如何去除链接下划线_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 不继承。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

正确写法：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，如，再配 .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 面板。