横向导航栏a标签下划线去不掉，根本原因是未覆盖a:link、a:visited、a:hover、a:active全部状态；仅写a{text-decoration:none}会失效，须显式重置所有伪类，并优先使用.nav-link等语义化类名控制，兼顾可访问性与交互反馈。
横向导航栏里 a 标签的下划线为什么去不掉
不是 text-decoration: none 写错了，而是它没覆盖到所有状态。横向导航栏常用 nav + ul + li + a 结构，而浏览器默认只对 a:link 设了下划线；一旦鼠标悬停或链接被访问过，a:hover、a:visited 会重新触发下划线——尤其当 CSS 框架（如 Bootstrap）或富文本 CMS 输出介入后，更易漏掉这些状态。
- 必须同时写全：
a, a:link, a:visited, a:hover, a:active - 如果用了
display: block（导航栏常见），a已是块级元素，但伪类仍需显式重置 - 检查 DevTools 的 Computed 面板，确认
text-decoration最终值确实是none，而不是被父级或框架样式覆盖
用类名控制比全局重置更安全
直接写 a { text-decoration: none; } 会波及页面所有链接，包括按钮、页脚、文章内链，破坏可访问性与一致性。横向导航栏通常有明确语义和结构，更适合加专属类名。
- HTML 中给导航链接加类：
<a href="#" class="nav-link">首页</a> - CSS 写：
.nav-link { text-decoration: none; }，再补上.nav-link:hover { text-decoration: none; } - 若导航使用了
button或router-link等非原生a，需额外匹配其实际渲染出的标签或类
去掉下划线后，用户怎么知道这是可点击的导航项
横向导航栏失去下划线后，纯文字+颜色变化在低对比度屏或色觉障碍用户眼里几乎不可辨。WCAG 明确要求链接需提供非颜色依赖的视觉提示。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐替代方案：
.nav-link:hover { border-bottom: 2px solid #007bff; }（底部高亮比下划线更轻量且可控） - 或用背景微调：
.nav-link:hover { background-color: #f8f9fa; }，但注意与当前激活态（.nav-link.active）区分 - 禁用
outline: none——焦点状态必须保留，否则键盘用户无法定位当前导航项
移动端点击反馈别被一并清掉
在 iOS Safari 和部分 Android 浏览器中，点击链接会默认出现灰色半透明 overlay（tap highlight）。如果你在重置 text-decoration 时顺手写了 * { outline: none; } 或 a { -webkit-tap-highlight-color: transparent; }，会导致点击无反馈，影响操作确认感。
立即学习“前端免费学习笔记（深入）”；
- 保留 tap highlight：
a { -webkit-tap-highlight-color: rgba(0, 123, 255, .2); } - 如真需隐藏，至少为
:active状态补充视觉变化，例如：.nav-link:active { opacity: 0.7; } - 测试真机：模拟器常忽略 tap highlight 行为，务必在 iPhone / Pixel 实机点按验证
真正麻烦的从来不是“怎么写 CSS 去掉下划线”，而是去掉之后，那个 li 里的 a 是否还在视觉层和交互层维持了清晰的可点击信号——尤其是当它还承担着当前页标识（.nav-link.active）职责时。
