应使用 a:link, a:visited { text-decoration: none; } 去除默认下划线，同时保留 a:hover、a:focus 等伪类样式以保障可访问性，并配合颜色对比、图标等多重视觉线索确保链接可感知。
用 CSS 的 text-decoration 去掉链接下划线
默认情况下，<a></a> 标签自带 text-decoration: underline，这是浏览器 UA 样式决定的，不是 HTML 本身带的“属性”。所以必须用 CSS 覆盖它。
最直接写法是：
a {
text-decoration: none;
}
但要注意：这个规则会影响所有链接，包括未访问、已访问、悬停、点击中状态。如果只想去掉默认下划线，又保留 hover 时加回（常见设计），得单独控制伪类：
-
a:link和a:visited设为none -
a:hover可设为underline或其他效果 - 别漏掉
a:focus—— 键盘用户依赖它定位，移除后可能影响可访问性
内联 style 写法只适合临时调试
直接在标签里加 style="text-decoration: none;" 能立刻生效，比如：
立即学习“前端免费学习笔记（深入）”；
<a href="#" style="text-decoration: none;">没下划线</a>
但它绕过了样式复用和维护逻辑，容易导致：
- 多个链接重复写，改起来要逐个找
- 和外部 CSS 冲突时优先级混乱（内联样式虽高，但加了
!important更难收场） - 无法统一控制响应式或主题切换行为
上线项目里尽量避免，仅限快速验证或原型阶段用。
全局去下划线后，记得检查可访问性问题
纯文字链接没了下划线，色弱用户或低对比度屏幕下可能根本看不出哪段是可点击的。这不是“美观”问题，是 WCAG 明确要求的可感知性（Perceivable）。
稳妥做法是组合视觉线索：
- 保留
a:hover下划线，或改用背景色/边框变化 - 确保链接文字与周围文本有足够颜色对比（至少 4.5:1）
- 对关键操作链接（如“删除”“支付”），别只靠颜色区分，加图标或文字说明更可靠
Chrome DevTools 的 Lighthouse 面板能一键检测对比度是否达标，顺手跑一下比凭感觉靠谱。
React/Vue 等框架里，class 名别拼错
在组件中写 className="no-underline" 或 :class="{ 'no-underline': isPlain }" 很常见，但容易栽在细节上：
- CSS 类名本身得正确定义，比如写成
.no-underline { text-decoration: none; }，而不是漏掉点号或拼成noUnderline - 如果用了 CSS Modules 或 scoped style，类名会被哈希化，直接写 class 可能不生效，得用
:global(.no-underline)或透出样式 - Next.js 的 App Router 默认启用 CSS 模块隔离，
text-decoration这种基础属性反而容易被忽略作用域限制
遇到“写了没反应”，先看浏览器开发者工具里，该元素最终计算出的 text-decoration 值是不是 none，而不是猜 class 有没有加载成功。
