内联style="color:..."仅控制默认态，对:hover等伪类无效；CSS伪类须按LVHA顺序书写；外部CSS文件统一管理更可靠；需确保颜色对比度≥4.5:1并兼顾无障碍访问。
内联 style="color: ..." 只管默认状态
直接在 <a> 标签里写 style="color: red;" 最快，但只影响未访问、未悬停、未点击时的显示颜色。它对 :hover、:visited、:active 完全无效。
常见错误现象：style="color: #ff6b35" 写了却没变色——大概率是漏了引号、用了中文冒号或分号、或者父级元素设置了 color 且带 !important，把内联样式压住了。
- 支持的颜色值：英文名（
red）、十六进制（#007bff）、RGB（rgb(0, 123, 255)） - 别用
<font>标签套链接，HTML5 已废弃，且同样无法控制交互态 - 仅适合临时调试或极个别链接，不适合批量或状态管理
a:link、a:visited、a:hover、a:active 必须按顺序写
CSS 伪类不是随便堆砌的。浏览器按 :link → :visited → :hover → :active（LVHA）顺序匹配规则，顺序错乱会导致 :hover 被 :visited 拦截而失效。
比如写了 a:visited { color: gray; } 在 a:hover 后面，鼠标悬停已访问链接时，可能还是灰色——因为 :visited 规则优先级更高且已命中。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须显式声明
a:link和a:visited，否则部分浏览器会沿用默认蓝色/紫色，破坏一致性 -
:visited受现代浏览器安全限制：只能改color、background-color、border-color等有限属性，font-size或transition会被忽略 - 如果要加下划线或去掉下划线，统一用
text-decoration，别只在:hover里设
多页面项目必须用外部 CSS 文件
一个网站有首页、文章页、联系页，每页都塞 <style> 或一堆 style="..."，等于埋了十处修改点。改品牌色时漏掉一页，链接就突兀地蓝着。
正确做法是抽离成 styles.css，然后所有 HTML 用 <link rel="stylesheet" href="styles.css"> 引入。
- 外部文件内容示例：
a:link { color: #007bff; } a:visited { color: #6c757d; } a:hover { color: #0056b3; } a:active { color: #004080; } - 路径写错（比如写成
css/styles.css却放在根目录）会导致样式完全不加载，F12 查 Network 面板看 404 是最快确认方式 - 上线后改了 CSS 却没生效？清浏览器缓存或加版本参数：
href="styles.css?v=2.1"
颜色对比度不够会直接影响可读性
很多团队只盯着“好看”，把链接设成浅灰 #999 或淡紫 #d8b7ff，结果用户在白背景上根本看不清，尤其对视力敏感人群。
WCAG 推荐最小对比度为 4.5:1（普通文本），工具如 Chrome DevTools 的 Lighthouse 或在线 contrast checker 可一键验证。
- 深色背景上别用纯黑文字配深蓝链接，容易混淆；建议链接用亮色（如
#00aaff），文字用#ffffff - 已访问和未访问链接颜色差异太小（比如
#007bff和#0069d9），用户无法快速识别浏览历史 - 别为了“简洁”去掉所有下划线——对屏幕阅读器用户和色觉障碍者，下划线是关键识别线索
color，而是让所有状态在各种设备、各种用户能力下都稳定可辨。很多人调完 :hover 就以为完了，却忘了检查暗色模式下是否反白、高对比度模式是否崩坏、甚至手机触控时 :active 是否有足够反馈。 
