Chrome 中 .main-anchor:link 未生效，通常是因为链接已被访问过，触发了 :visited 规则；而若未按 LVHA 顺序（:link → :visited → :hover → :active）声明样式，后续规则会覆盖前序规则，导致预期颜色不生效。
chrome 中 `.main-anchor:link` 未生效，通常是因为链接已被访问过，触发了 `:visited` 规则；而若未按 lvha 顺序（`:link` → `:visited` → `:hover` → `:active`）声明样式，后续规则会覆盖前序规则，导致预期颜色不生效。
在 CSS 中，锚点（<a></a>）元素的交互状态由多个伪类控制：:link（未访问的链接）、:visited（已访问的链接）、:hover（鼠标悬停）、:active（点击激活中）。它们并非独立生效，而是遵循层叠优先级与声明顺序双重约束。
关键在于 LVHA 顺序（LoVe HAte 记忆法）：
-
:link必须定义在最前； - 其次是
:visited； - 然后是
:hover； - 最后是
:active。
这是因为浏览器将这些伪类视为同一选择器的不同状态，当多个规则匹配同一元素时，后声明的、同等级别（相同 specificity）的规则会覆盖先声明的。例如：
/* ❌ 错误：:visited 在 :link 之后，且未访问时 :link 生效；但一旦点击，:visited 立即接管，且因位置靠后，即使 :link 存在也无机会表现 */
.main-anchor:visited { color: black; }
.main-anchor:link { color: black; } /* 此规则实际永不生效（除非重置浏览历史） */
/* ✅ 正确：严格遵循 LVHA 顺序，确保各状态样式可被精准控制 */
.main-anchor:link { color: #333; }
.main-anchor:visited { color: #666; }
.main-anchor:hover { color: #007bff; }
.main-anchor:active { color: #0056b3; }⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 浏览器对
:visited的样式限制严格（出于隐私保护），仅允许修改color、background-color、border-color、outline-color及部分text-*属性，且不能通过 JavaScript 读取其状态； - 即使未手动点击，Chrome 可能因预加载、DNS 预解析或缓存记录将链接标记为
:visited； - 若调试时希望强制恢复
:link状态，可清空浏览器历史记录，或使用隐身窗口测试； - 推荐始终为所有交互状态提供显式样式，避免依赖浏览器默认（如未访问链接默认蓝色、已访问为紫色）。
总结：.main-anchor:link 在 Chrome 中“失效”，往往不是 Bug，而是状态切换与 CSS 声明顺序共同作用的结果。坚持 LVHA 原则、理解伪类互斥性，并结合开发者工具的“Emulate”功能（模拟不同状态），才能稳定、可靠地控制链接视觉表现。
