最安全方案是加类控制（如.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 中写：
@#@#@#@#@#@#@#@#@#@0 - 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 能自动检测
- 关键操作链接（如“提交”“删除”）建议加图标（
）或前置文字（“前往 →”），别只押注样式
真正卡住人的从来不是怎么写那行 text-decoration: none，而是没意识到：下划线可能来自多个源头，而“看不见”比“去不掉”更危险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
