最简方案是a { color: red; text-decoration: none; }，但需同时覆盖:link和:visited状态，注意优先级、伪类顺序及浏览器兼容性。
如何用 CSS 同时改 a 标签的下划线和字体颜色
直接写 a { color: red; text-decoration: none; } 是最简方案，但实际中常因选择器优先级或伪类遗漏导致失效。关键不是“能不能”，而是“在哪写、写给谁”。
超链接有四种状态：:link（未访问）、:visited（已访问）、:hover（悬停）、:active（点击瞬间），浏览器对它们的样式限制不同——比如 :visited 不能修改 color 以外的多数属性（出于隐私保护），而 text-decoration 在所有状态下都可设。
- 若只改默认颜色和去掉下划线，必须同时覆盖
a:link和a:visited，否则已访问链接仍显示蓝色+下划线 -
text-decoration推荐用none或underline，避免用text-decoration: underline solid #ff6b35这类带颜色的写法——IE 不支持，且部分安卓 WebView 渲染异常 - 如果用了 CSS 预处理器（如 Sass），别把
a样式写在嵌套结构深层，容易被外层!important或更高优先级规则覆盖
为什么加了 color 没生效，但下划线去掉了
典型现象：写了 a { color: #333; text-decoration: none; }，结果文字还是蓝色，下划线却没了。大概率是浏览器默认样式表或外部 CSS 中存在更具体的规则，比如：
a:hover {
color: #007bff !important;
}
或者某框架（如 Bootstrap）注入了：
立即学习“前端免费学习笔记（深入）”；
.nav-link {
color: #6c757d;
}
- 用浏览器开发者工具（F12）检查元素，看
color属性是否被划掉（strikethrough），被划掉说明被更高优先级规则覆盖 - 不要滥用
!important，优先提升选择器特异性，例如用body a替代单纯a - 注意 CSS 加载顺序：后加载的样式会覆盖先加载的，确保自定义样式在第三方 CSS 之后引入
text-decoration-color 能不能单独改下划线颜色
可以，但兼容性差。Chrome 89+、Firefox 70+ 支持 text-decoration-color: #e74c3c，但 Safari 直到 16.4 才完全支持，iOS 16.4 以下基本不认。
更稳妥的做法是用 border-bottom 模拟：
a {
color: #2c3e50;
text-decoration: none;
border-bottom: 1px solid #3498db;
}
a:hover {
border-bottom-color: #e74c3c;
}
-
border-bottom的位置、粗细、颜色完全可控，且 hover 时过渡动画友好（transition: border-bottom-color 0.2s） - 注意设置
padding-bottom或line-height，避免下划线贴着文字太近 - 如果链接内含
strong或span，border-bottom会继承父级，而原生text-decoration是独立绘制的——这点在复杂内联结构里要留意
内联样式 style="color:red;text-decoration:none" 为什么有时无效
内联样式优先级虽高，但遇到 !important 仍会被干掉。更常见的是：你写的内联样式被 JavaScript 动态覆盖了。
- React/Vue 等框架中，组件重渲染可能重置内联样式，应改用 className 控制
- 某些 CMS（如 WordPress）主题会用 JS 给所有
a标签统一加 class 或 style，你的内联样式一刷新就消失 - 邮件模板中，很多客户端（如 Outlook）根本不支持
text-decoration内联写法，必须用<font>包裹或表格 hack
真正需要“绝对控制”的场景，比如生成 PDF 或邮件，别依赖 CSS，老实用 <font color="#d32f2f"><u>文本</u></font> 这种组合——不是推荐，是现实所迫。
