text-decoration: none 是唯一可靠、语义正确且兼容的去下划线方式；必须显式覆盖 a、a:link、a:visited、a:hover、a:active、a:focus 所有状态，因 text-decoration 不继承且各伪类有独立默认样式。
如何用 text-decoration 去掉链接下划线
默认情况下，<a></a> 标签自带 text-decoration: underline，想取消必须显式覆盖。直接在链接上写 text-decoration: none 是最常用且可靠的方式，但要注意选择器优先级和继承行为。
常见错误是只给 a 写了 text-decoration: none，却忘了它有伪类状态（比如 :hover、:visited），结果鼠标移上去又出现下划线——这是最多人踩的坑。
- 必须同时覆盖所有相关状态：
a、a:link、a:visited、a:hover、a:active、a:focus - 如果用了 CSS 预处理器或组件库，检查是否被更高优先级规则（如
!important或内联样式）覆盖 -
text-decoration不会继承，所以父元素设none对子a无效，必须作用于a自身
为什么 a { text-decoration: none } 有时不生效
根本原因是浏览器默认样式表中，:link 和 :visited 的规则优先级高于普通 a 选择器。Chrome 和 Firefox 默认把下划线定义在 a:link 和 a:visited 上，而不是 a 本身。
所以只写 a { text-decoration: none }，对未访问/已访问链接可能完全无效。
- 正确写法是：
a:link, a:visited, a:hover, a:active { text-decoration: none; } - 如果项目用到了 CSS 重置（如 Normalize.css），它通常已处理这部分，但不能默认依赖
- 使用
all: unset会清空所有装饰，但也会干掉cursor: pointer等关键行为，不推荐
text-decoration 的其他取值会影响无下划线效果吗
会。虽然目标是“无下划线”，但 text-decoration 是复合属性，还控制线条位置（text-decoration-line）、样式（text-decoration-style）和颜色（text-decoration-color）。单独设 text-decoration: overline 或 line-through 并不会让下划线消失——它只是换了一种线。
- 真正表示“什么线都不画”的只有
text-decoration: none -
text-decoration-line: none是标准写法，但兼容性不如text-decoration: none（IE 完全不支持前者） - 不要混用：写
text-decoration: none solid red会导致部分浏览器忽略整条声明（因为语法非法）
现代方案：用 text-decoration: none 还是 text-underline-offset
text-underline-offset 是新属性，用于调节下划线离文字的距离，但它不能“去掉”下划线——前提是下划线本来就存在。它解决的是“太贴字”或“太飘”的微调问题，不是替代 none 的方案。
如果你看到某些代码里用 text-underline-offset: -999px 来“隐藏”下划线，那是 hack，不可靠：在缩放、高对比度模式或某些字体下可能意外露出来，而且语义错误。
- 真要无下划线，坚持用
text-decoration: none覆盖所有状态 -
text-underline-offset只在需要保留下划线但调整位置时才用，比如配合text-decoration: underline做设计微调 - 目前 Safari 15.4+、Chrome 95+、Firefox 89+ 支持
text-underline-offset，但别把它当移除手段
:focus 状态——键盘用户 Tab 到链接时，若没设 text-decoration: none，下划线突然出现，既破坏一致性，也影响可访问性。这不是视觉细节，是交互链路的一环。
