最简单方法是直接设置a标签color属性，但需统一处理未访问、已访问、悬停、点击中等状态；推荐用css全局规则并配合currentcolor实现主题色自动继承，避免滥用!important，移动端需补充:active状态增强反馈。

直接改 a 标签的 color 属性最简单

浏览器默认给 a 标签设了蓝色（#0066cc）和下划线，想换颜色，最直白的办法就是用内联样式或 CSS 规则覆盖它。注意：只写 color 不够，因为链接有不同状态（未访问、已访问、悬停、点击中），不统一处理会导致颜色跳变。

• 内联写法（仅限单个链接）：@#@#@#@#@#@#@#@#@#@0
• 全局统一（推荐）：在 <style></style> 或 CSS 文件里加：

  a { color: #2563eb; text-decoration: none; }
  a:visited { color: #2563eb; }
  a:hover, a:focus { color: #1d4ed8; }

• 别漏掉 :visited —— 否则已点过的链接会退回紫色，默认值

用 currentColor 实现主题色自动继承

如果页面主色存在 CSS 变量（比如 --primary-color: #3b82f6;），或者想让链接颜色随父容器文字色动态变化，currentColor 是零配置方案。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 它始终等于当前元素的 color 值，无需额外声明：

  a { color: currentColor; text-decoration: none; }

• 父级改了字体色，所有用了 currentColor 的链接自动同步，适合深色/浅色模式切换
• 注意：IE 不支持 currentColor（但 IE 已淘汰，多数项目可忽略）

避免被 !important 拖累的优先级陷阱

常见错误是发现颜色没生效，就随手加 !important。这容易埋坑——后续维护时，别人很难覆盖你这条规则，尤其当框架或组件库自带样式时。

• 先查开发者工具里哪条样式被覆盖了，看 Computed 面板的最终 color 值
• 提高选择器权重更稳妥，比如把 a 改成 .nav-link a 或 body a
• 真要用 !important，只加在必要状态上，比如：a:hover { color: #1e40af !important; }，而非整套都加

移动端点击无反馈？补上 :active 状态

手机上点链接常感觉“没反应”，其实是 :active 状态没定义，导致按下瞬间颜色没变化，用户缺乏操作反馈。

• 加上这一行能明显提升手感：

  a:active { color: #1e3a8a; }

• 建议颜色比 :hover 更深一点，模拟“按下去”的视觉效果
• 如果不希望所有链接都动效，可用媒体查询限定：

  @media (hover: hover) { a:hover { color: #1d4ed8; } }

实际项目里，真正难的不是写几行 CSS，而是保持状态一致性 —— 尤其当多个团队共用同一套组件库时，a:visited 和 a:active 最容易被忽略，一上线就暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！