直接修改a标签color属性仅影响默认状态，需用lvha顺序的伪类（a:link、a:visited、a:hover、a:active）分别控制各状态颜色，并确保对比度≥4.5:1以满足可访问性要求。
直接改 a 标签的 color 属性就能生效，但仅限默认状态
浏览器对 a 标签有内置样式，未加任何 CSS 时，a:link 是蓝色、a:visited 是紫色。只写 a { color: red; }，实际只覆盖了部分状态——多数情况下它等价于 a:link，但不保证影响 a:visited 或 a:hover。
常见错误现象：改了 a { color: #333; }，结果已访问链接还是紫色；或者悬停没变色，以为 CSS 失效。
- 必须明确用伪类才能控制具体状态，不能依赖单个
a选择器“一劳永逸” - 颜色值支持英文名（
red）、十六进制（#007bff）、RGB（rgb(0, 123, 255)）、HSL 等，但别用透明度（rgba()或带 alpha 的 hex）做链接主色，可访问性差 - 如果页面已有框架或 CMS 注入的样式，
a规则可能被更高优先级选择器（如.nav a）覆盖，此时需检查 DevTools 中的“Computed”面板看哪条规则胜出
a:link、a:visited、a:hover、a:active 必须按 LVHA 顺序书写
这四个伪类不是随便排列的。CSS 解析是自上而下匹配，一旦某条规则命中，后续同优先级规则若冲突就会被跳过。比如把 a:hover 写在 a:link 前面，鼠标悬停时可能根本不会变色。
正确顺序就是 LVHA：a:link → a:visited → a:hover → a:active。这是规范要求，不是建议。
-
a:link只对尚未访问过的链接生效；已访问的链接即使没写a:visited，也会回退到浏览器默认紫色 -
a:hover必须放在a:visited后面，否则已访问链接悬停时仍显示a:visited颜色 -
a:active是点击瞬间的状态，持续时间极短，但漏掉会让用户感觉“没点到”，尤其在表单或按钮式链接中明显
外部 CSS 文件比内联 style 属性更可靠且可维护
写 @#@#@#@#@#@#@#@#@#@0 看似快，但无法定义 :hover，也不能复用，后期改十页就得改上百个 style 属性。真正上线项目基本不用这个方式。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
推荐做法：建一个 styles.css，内容类似：
a:link { color: #0066cc; }
a:visited { color: #551a8b; }
a:hover { color: #e63946; }
a:active { color: #2a9d8f; }
然后在 HTML 的 里引入：<link rel="stylesheet" href="styles.css">。
- 路径必须准确，相对路径以 HTML 文件为基准，不是 CSS 文件自身位置
- 不要在
<link>标签里加type="text/css"，HTML5 已废弃该属性 - 如果用了构建工具（Vite/Webpack），确保 CSS 文件被正确打包和引用，而不是 404
颜色对比度不够会导致可访问性失败
WCAG 2.1 要求普通文本（包括链接）与背景的对比度至少达 4.5:1。比如浅灰文字配白底、淡蓝文字配浅蓝背景，看着“差不多”，实则屏幕阅读器用户或视力弱者根本分不清哪里是链接。
这不是“美化建议”，而是法律风险点（尤其政府、教育、金融类网站）。
- 用浏览器插件（如 axe DevTools）或在线工具（WebAIM Contrast Checker）实时测对比度
- 别只测
a:link，a:visited和a:hover也得分别测——悬停后变浅色很常见，但很可能跌破阈值 - 深色模式下，如果靠 JS 切换主题，记得同步更新所有链接状态的颜色，否则容易出现黑底+深紫链接这种“看不见”的组合
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
