用 a { text-decoration: none; } 覆盖浏览器默认下划线；需同时处理 a:hover、a:visited 等伪类，并补充颜色、背景或轮廓等视觉反馈以保障可访问性。
HTML 默认下划线只出现在链接（<a></a>）上，不是所有文字都有；去掉它，关键不是“删掉什么”，而是“覆盖默认样式”。
怎么用 CSS 去掉 <a></a> 标签的下划线
浏览器对 <a></a> 有内置样式：text-decoration: underline。要让它消失，必须显式重写这个属性。
- 最常用、最安全的方式是：
a { text-decoration: none; } - 如果只想去掉某类链接（比如导航栏），加 class 更稳妥：
.nav-link { text-decoration: none; } - 别用
text-decoration: none直接写在行内 style 里——维护困难，且容易被其他样式覆盖 - 注意：IE8 及更早版本不支持
text-decoration: none在非<a></a>元素上生效，但现代项目基本不用考虑
为什么有时候加了 text-decoration: none 还有下划线
常见原因不是代码写错，而是样式没生效或被覆盖。
- CSS 优先级不够：检查是否被更具体的规则（比如
nav a:hover）或!important覆盖 - 伪类没处理全：只写了
a { text-decoration: none; }，但用户鼠标悬停时a:hover又加回了下划线，得一并写：a, a:hover, a:visited, a:focus { text-decoration: none; } - 用了
border-bottom模拟下划线：这种不是text-decoration，得查border-bottom相关样式 - 父元素设置了
text-decoration: underline：该属性会继承并“透传”到子链接，需在<a></a>上用text-decoration: none强制中断
去掉下划线后，怎么让链接还能被识别为可点击
纯视觉去下划线后，用户可能分不清哪段文字是链接，尤其对无障碍访问不友好。
立即学习“前端免费学习笔记（深入）”；
- 务必补上其他视觉提示：比如改颜色（
color: #0066cc）、加 hover 背景色、或加图标 - 别依赖颜色 alone：色觉障碍用户可能无法分辨，hover 或 focus 时加
outline或box-shadow更可靠 - 如果是为了“让链接看起来像普通文字”，建议用
role="link"+ JS 事件模拟，而不是隐藏语义 —— 屏幕阅读器仍需知道这是链接
真正麻烦的从来不是加一行 text-decoration: none，而是忘记它只管“装饰”，不管“语义”和“交互反馈”。下划线没了，用户还得知道“这儿能点”。
