用text-decoration: none可去除超链接默认下划线，本质是覆盖浏览器内置样式；需注意兼容性、状态样式重置及可访问性影响。
用 text-decoration 直接去掉下划线
超链接默认带下划线，本质是浏览器内置样式在起作用，不是 HTML 标签自带的。真正控制它的，是 CSS 的 text-decoration 属性。只要给 @#@#@#@#@#@#@#@#@#@0
.no-underline { text-decoration: none; }
text-decoration 的兼容性和副作用
这个属性从 IE4 就支持，现代浏览器完全没问题，但要注意它不只是控制下划线——text-decoration 是个复合属性，值为 none 会同时关掉上划线、删除线和闪烁（虽然现在没人用闪烁）。
容易踩的坑：
- 只写
text-decoration: none会丢失访问后变色等状态样式，建议配合:hover、:visited一起重置，否则用户可能分不清哪是链接 - 有些旧版 Safari 对
text-decoration: none在内联元素上渲染不一致，加display: inline-block或border-bottom: 1px solid transparent可临时绕过 - 如果用了
text-decoration: underline再想取消，必须显式写none，不能靠继承或 unset
为什么不用 <u></u> 或 JavaScript 去掉下划线
<u></u> 是语义化标签，表示“下划线文本”，不是为链接设计的；强行套用反而破坏可访问性，屏幕阅读器可能误读。JavaScript 操作 style.textDecoration 完全没必要——纯样式问题，CSS 更轻量、更可靠。
真实场景中，以下情况别硬用 JS：
- 页面加载完统一处理一批
<a></a>—— 直接写 CSS 规则就行 - 点击后动态隐藏下划线 —— 用
:active伪类更自然 - 需要兼容老 IE6/7 —— 这些浏览器也认
text-decoration: none，无需降级方案
移动端点击反馈和可访问性提醒
去掉下划线后，链接视觉辨识度下降，尤其在纯文字流里。iOS Safari 和 Android Chrome 默认会给 <a></a> 加点击高亮（灰色半透明 overlay），但如果你同时清除了 outline 或设置了 -webkit-tap-highlight-color: transparent，用户可能感觉“点不动”。
建议保留基础反馈：
- 确保链接有足够对比度（至少 4.5:1）
- 加
outline: none时，务必提供:focus替代样式，比如边框或背景色变化 - 别为了“好看”把所有链接都去下划线，导航栏、页脚这类关键区域留着更安全
下划线不是装饰，是功能提示。删它之前，先确认用户还能一眼认出这是可点的东西。
<a href="https://example.com" style="text-decoration: none;">无下划线链接</a>
a { text-decoration: none; }前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
