如何正确使用 CSS 的 :link 伪类设置链接颜色

Chrome 中锚点链接未按预期显示黑色，是因为浏览器默认的 :visited 状态覆盖了 :link 样式；解决关键是遵循 LVHA 顺序（:link → :visited → :hover → :active）并确保链接未被访问过或统一重置状态。

Chrome 中锚点链接未按预期显示黑色，是因为浏览器默认的 :visited 状态覆盖了 :link 样式；解决关键是遵循 LVHA 顺序（:link → :visited → :hover → :active）并确保链接未被访问过或统一重置状态。

在 CSS 中，:link 伪类仅匹配尚未被用户访问过的超链接（即 href 值有效且状态为“未访问”）。一旦用户点击过该链接，浏览器会将其标记为已访问，此时 :link 规则将不再生效，而 :visited 规则取而代之——这正是你在 Chrome 中观察到“.main-anchor:link { color: black; } 无效，但 .main-anchor:visited { color: black; } 生效”的根本原因。

要确保链接样式稳定可控，必须遵守 LVHA 顺序（也称“LoVe HAte”口诀）：

1. :link（未访问）
2. :visited（已访问）
3. :hover（悬停）
4. :active（激活/点击中）

该顺序不仅关乎可读性，更是 CSS 层叠规则的关键：后声明的、同优先级的伪类会覆盖前面的样式。若遗漏或错序（例如把 :hover 写在 :link 之前），可能导致交互状态下颜色意外回退。

正确写法示例：

.main-anchor:link {color: black;}.main-anchor:visited {color: black; /* 统一已访问状态颜色 */}.main-anchor:hover {color: #0066cc;text-decoration: underline;}.main-anchor:active {color: #cc3300;}

注意事项：

1. 浏览器对 :visited 的样式限制严格（出于隐私保护），仅允许设置 color、background-color、border-color、outline-color 及部分 text-* 和 column-* 属性；其他属性会被忽略。
2. 若需彻底重置链接状态（如开发调试时），可清空浏览器历史记录，或使用无痕模式测试纯 :link 效果。
3. 推荐始终为 :link 和 :visited 显式声明颜色，避免依赖浏览器默认值（通常 :link 为蓝色，:visited 为紫色）。

总结：链接样式的不可预测性往往源于状态逻辑与层叠顺序的忽视。坚持 LVHA 顺序、显式定义各状态、理解 :link 的语义边界（仅作用于未访问链接），即可在 Chrome 及所有现代浏览器中实现稳定、可维护的锚点样式控制。