直接在<a>标签用style="color:#fff;background-color:#007bff;"可快速设置单链接字体与背景色，但需注意分号、英文符号及废弃属性；hover等状态须单独定义样式。
只改单个链接的字体色和背景色，用 style 最快
直接在 <a> 标签里加 style="color: #fff; background-color: #007bff;" 就能同时改字体和背景。常见错误是漏掉分号、用中文冒号或引号，或者把 background 错写成 bgcolor（已废弃，不生效）。
注意：这种写法只影响默认状态；:hover 或 :visited 下背景和文字色不会自动同步变，鼠标移上去还是白字蓝底——除非你额外加 JS 或内联事件（不推荐）。
- 支持的颜色写法：
red、#28a745、rgb(40, 167, 69)、hsl(140, 50%, 40%) - 若背景太深而文字看不清，记得配高对比度文字色，比如深蓝背景配白色文字（
color: #fff） - 别用
<font>包裹链接来设颜色——HTML5 已彻底废弃，且无法控制背景
a:hover 背景变色后文字没反应？检查这三点
写了 a:hover { background-color: #0056b3; color: white; } 却没效果，大概率不是语法错，而是被其他规则压住了。
- 父容器设置了
pointer-events: none，整个链接区域失活，:hover根本不触发 - 链接被透明
<div>或伪元素盖住，鼠标实际没悬停在<a>上 - CSS 顺序问题：如果前面定义了
a:visited { color: purple; }，又没给a:hover显式设color，那么悬停时可能沿用:visited的文字色，看起来“没变”
验证方法：浏览器开发者工具里 hover 时看 computed 样式，确认 color 和 background-color 是否真被应用。
立即学习“前端免费学习笔记（深入）”；
统一管理多状态样式，必须按 link → visited → hover → active 顺序写
这是 CSS 层叠逻辑决定的——如果 a:visited 写在 a:hover 后面，且两者都设了 color，那即使鼠标悬停，也会优先显示 :visited 的颜色（因为更晚声明、权重相同）。
正确写法示例：
a:link { color: #007bff; background-color: #f8f9fa; }
a:visited { color: #6c757d; background-color: #e9ecef; }
a:hover { color: #fff; background-color: #007bff; }
a:active { color: #fff; background-color: #0056b3; }
- 所有状态都显式声明
background-color，避免继承或浏览器默认值干扰 -
a:link和a:visited必须分开写，否则已访问链接会丢失视觉区分 - 不要依赖
a { ... }通配——它不覆盖:visited，也不触发:hover
多页面共用配色方案，外部 CSS 文件不能少
当网站有首页、文章页、产品页等多个 HTML 文件时，硬编码每页的 <style> 或一堆 ，等于埋下维护雷：改一个色，得手动翻十页文件，漏改一处就风格不一致。
正确做法是建一个 links.css，内容如上节所示，然后每页 <head> 里加：
<link rel="stylesheet" href="css/links.css">
- 路径要写对，建议用相对路径（如
css/links.css），避免绝对路径跨环境失效 - 别把链接样式混进大而全的
main.css里——后期想单独调整超链接表现时，得扒半天代码 - 如果用了构建工具（Vite/Webpack），可把这部分抽成 SCSS 变量，但纯静态站，一个干净的
links.css就够用
真正容易被忽略的是：背景色变化后，文字可读性是否还达标。WCAG AA 级要求文本与背景对比度 ≥ 4.5:1，深灰文字配浅灰背景看着“差不多”，实则在弱视用户设备上根本看不见——别凭肉眼判断，用浏览器插件测一下。
