最安全方案是加类控制（如.no-underline）并覆盖全部伪类状态；直接写a { text-decoration: none; }常因状态遗漏、优先级不足或伪元素下划线而失效，且破坏可访问性。

text-decoration: none 是唯一能真正去掉下划线的写法，但直接套用常失效——不是语法错，而是状态没覆盖全、优先级被压、或下划线根本不是 text-decoration 画的。

为什么写了 text-decoration: none 还有下划线

浏览器默认只给 a:link 加了 text-decoration: underline，但你鼠标一悬停，a:hover 可能又单独设了 underline；点过之后，a:visited 也可能恢复它。DevTools 里看到划掉的 text-decoration 行，说明被更高权重规则盖住了。

• 必须显式重置全部状态：a, a:link, a:visited, a:hover, a:active { text-decoration: none; }
• 若用了 Bootstrap/Tailwind 等框架，它们常带 !important，得用 body a 或 .my-link 类提高 specificity
• 某些 CMS 或 Markdown 渲染器用伪元素（::after）画下划线，text-decoration 完全无效，得查 Computed 面板确认最终生效机制

只改部分链接，别动全局 a

全局清下划线会连带干掉导航栏、按钮里的链接样式，尤其当项目已引入 UI 框架时，风险极高。更安全的做法是加类控制。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• HTML 中写：<a href="#" class="no-underline">无下划线链接</a>
• CSS 中写：.no-underline { text-decoration: none; }，再补一句 .no-underline:hover { text-decoration: none; } 防 hover 恢复
• 避免内联写 style="text-decoration: none"——调试难、无法复用、hover 状态还得另加 JS

去掉下划线后，用户还能认出这是链接吗

纯文字 + 无下划线 + 单靠颜色区分，对色弱用户或低对比度屏幕基本不可见。WCAG 明确要求链接必须有非颜色的视觉提示。

立即学习“前端免费学习笔记（深入）”；

• 用 border-bottom: 1px solid currentColor 替代下划线，hover 时可加粗或变色
• 确保文字与背景对比度 ≥ 4.5:1，Chrome DevTools 的 Lighthouse 能自动检测
• 关键操作链接（如“提交”“删除”）建议加图标（<svg></svg>）或前置文字（“前往 →”），别只押注样式

真正卡住人的从来不是怎么写那行 text-decoration: none，而是没意识到：下划线可能来自多个源头，而“看不见”比“去不掉”更危险。