text-decoration: none 是唯一可靠、语义正确且兼容的去下划线方式；必须显式覆盖 a:link、a:visited、a:hover、a:active、a:focus 等全部伪类，因 text-decoration 不继承且各状态有独立默认样式。
text-decoration: none 是唯一能直接关闭链接下划线的 CSS 属性值，但仅写这一条远远不够——浏览器默认样式、伪类覆盖、框架预设规则都可能让它失效。
为什么只写 a { text-decoration: none; } 常常不生效
多数情况下，你写了这条规则却仍看到下划线，根本原因不是语法错，而是选择器权重被更高优先级规则压倒。比如：
- Bootstrap 5 的
.nav-link:hover规则带!important，普通a选择器无法覆盖 - 某些 UI 框架（如 Tailwind）或 CMS 主题里，
a:hover单独设置了text-decoration: underline - 浏览器对
a:visited的限制：部分浏览器（如 Chrome）会强制保留其下划线，除非显式重置该状态
必须同时覆盖全部链接状态才能真正“默认无下划线”
单靠 a 元素选择器，只能影响未访问链接；已访问、悬停、激活、聚焦等状态仍可能触发下划线。稳妥做法是显式声明全部伪类：
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
text-decoration: none;
}
注意顺序：把 a 放最前，:focus 放最后，避免因层叠顺序导致某些状态被意外忽略。
用 Bootstrap 或现代工具类时别硬怼全局规则
如果你项目里用了 Bootstrap 5.3+，直接加 class="text-decoration-none" 就行，它已内置对 :hover 和 :focus 的清除；若用 Sass，改 $link-decoration 变量再编译更干净。硬写 a { text-decoration: none !important; } 容易误伤分页、导航栏等本该有下划线的交互区域。
内联样式和框架绑定要小心优先级陷阱
在 Vue/React 里用 :style="{ 'text-decoration': 'none' }" 或 :class="{ 'no-underline': true }"，得确认对应 CSS 类没被更高权重规则覆盖。常见坑是：.btn a 这类组合选择器权重高于单个 class，此时 .no-underline 就会被无视——要么提升选择器（如 .btn .no-underline），要么加 !important（慎用）。
真正难的不是写 text-decoration: none，而是判断当前下划线到底来自哪一层规则：浏览器默认？框架？主题？还是你自己某处漏写了 :hover？打开 DevTools 的 Styles 面板，逐层点开 a 元素的 computed 样式，看 text-decoration 被哪条规则最终决定——这才是最省时间的做法。
