用 a { text-decoration: none; } 可全局去除超链接下划线;若失效,需检查优先级、hover 状态、父级样式或使用 text-decoration-line: none 精确控制。

如何用 CSS 去掉超链接的下划线
默认情况下,@#@#@#@#@#@#@#@#@#@0
text-decoration: underline 并继承下来(注意:text-decoration 不继承,但视觉上可能被误判;真正要查的是是否父元素用了 text-underline-offset 或伪元素模拟下划线)进阶控制:只去下划线,保留其他装饰
如果你只想移除下划线,但希望保留上划线、删除线等其它装饰,不能依赖 none —— 因为它会清空全部。此时需用 text-decoration-line(现代浏览器支持):
a {
text-decoration: none;
}
-
text-decoration-line: none和text-decoration: none效果一致,但前者更精确,且可与text-decoration-color、text-decoration-thickness组合使用 - 旧版 Safari(text-decoration-line,生产环境建议仍以
text-decoration: none为主 - 若需兼容老浏览器又想精细控制,可用伪元素方案,但代价是语义性下降,一般没必要
真正要注意的不是“怎么写”,而是“写在哪”和“有没有被覆盖”。打开 DevTools,选中链接,看 text-decoration 是否被 strike-through 或灰色显示 —— 那才是问题真正的藏身之处。
a {
text-decoration-line: overline; /* 只加一条上划线 */
/* 或完全关闭下划线: */
text-decoration-line: none;
}前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











