text-decoration: none 不生效的主因是样式被覆盖或选择器权重不足，需覆盖 a:link、a:visited、a:hover、a:active 全部伪类，或用 a[href] 提高特异性；推荐 border-bottom 替代以避免透传与兼容问题。

text-decoration:none 为什么有时不生效

直接写 text-decoration: none 却仍有下划线，大概率是样式被覆盖或选择器权重不够。浏览器默认给 a 标签加了 text-decoration: underline，而这个声明常出现在用户代理样式表里——它会被你写的规则覆盖，但前提是你的规则必须“赢过”其他 CSS 声明。

• 检查是否被更具体的选择器覆盖，比如 .nav a:hover 里又写了 text-decoration: underline
• 注意伪类顺序：a:link、a:visited、a:hover、a:active 都得单独设，只写 a 不管用
• 如果用了 CSS 框架（如 Bootstrap），它的 a 样式可能带 !important，这时你也得加 !important 才能压过（不推荐，优先提高选择器特异性）

怎么一次性去掉所有链接下划线

最稳妥的方式是明确覆盖全部状态，而不是依赖继承或简写。别图省事只写 a，那只会干掉默认的 :link 和 :visited，鼠标悬停时下划线又回来了。

• 用组合选择器一次性处理：a:link, a:visited, a:hover, a:active { text-decoration: none; }
• 如果项目允许，用属性选择器更干净：a[href] { text-decoration: none; }，它天然避开无 href 的假链接
• 注意：这会影响可访问性。屏幕阅读器依赖下划线识别链接，生产环境建议配合 border-bottom 或颜色对比强化视觉提示

inline 元素里套 inline 元素，text-decoration 会透传

text-decoration 在 inline 流中会向下“穿透”，比如 a 里嵌了个 span，即使给 span 单独设 text-decoration: underline，它也会和父级的 none 冲突，最终表现不可控。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 避免在 a 内部再用 text-decoration 控制子元素，改用 border-bottom 或 background-image 模拟下划线
• 若必须局部加装饰，用 text-decoration-line: none + text-decoration-line: underline 分开控制（仅支持较新浏览器）
• 老项目兼容 IE11？放弃 text-decoration-line，统一用 border-bottom 替代，更可控

用 border-bottom 替代 text-decoration 的实际写法

当需要精确控制位置、粗细、颜色或 hover 动画时，border-bottom 是更可靠的选择。它不会透传，也不受伪类继承干扰，还能做平滑过渡。

立即学习“前端免费学习笔记（深入）”；

• 基础替换：a { text-decoration: none; border-bottom: 1px solid currentColor; }
• hover 时变色：a:hover { border-bottom-color: #007bff; }
• 想让下划线离文字远一点？用 padding-bottom 配合 border-bottom，别碰 line-height
• 注意：border-bottom 会撑高行框，如果周围是纯文本，可能造成基线错位，此时加 vertical-align: bottom 微调

去掉链接下划线看着简单，真正卡住人的往往是伪类遗漏、透传行为、或者框架样式干扰。最常被忽略的是：没检查 a:hover，结果鼠标一移上去下划线就弹出来。