:link 和 :visited 不冲突，而是因浏览器强制 LVHA 顺序（:link→:visited→:hover→:active）及 specificity 规则导致样式覆盖；:visited 仅支持有限属性且受协议、href 等限制。
为什么 :link 和 :visited 样式会“冲突”
它们不是真冲突，而是浏览器强制按特定顺序应用：:link 匹配未访问链接，:visited 匹配已访问链接，两者互斥。但如果你写了重复属性（比如都设了 color），而 :visited 规则被忽略或没生效，往往是因为它被其他更具体的规则覆盖，或写在了 :link 后面却没加足够权重。
:visited 必须写在 :link 之后才可能生效
CSS 伪类的层叠顺序是有硬性要求的：:link → :visited → :hover → :active（LVHA 顺序）。如果 :visited 写在 :link 前面，且两者选择器权重相同，那它的声明会被后面同名属性的 :link 覆盖——哪怕链接实际是已访问状态。
- ✅ 正确顺序：
a:link { color: blue; }<br>a:visited { color: purple; }<br>a:hover { color: red; } - ❌ 错误顺序：
a:visited { color: purple; }<br>a:link { color: blue; }——此时已访问链接仍显示蓝色 - ⚠️ 注意：
:visited只能设置有限样式：仅color、background-color、border-color、outline-color及其透明度相关属性（如opacity），其它如font-size、display、transform会被浏览器静默忽略
当选择器权重不同时，优先级怎么算
即使顺序对了，如果 :visited 的选择器比 :link 更弱，它依然可能被覆盖。例如：
a:link { color: blue; } /* 权重 0,0,1,1 */<br>.nav a:visited { color: green; } /* 权重 0,0,2,1 —— 更高，能生效 */<br>#header a:visited { color: orange; } /* 权重 0,1,1,1 —— 更高，也能生效 */- 浏览器只关心具体性（specificity），不关心伪类本身；
:visited不自带额外权重 - 若两个规则权重相同，后出现者胜出（所以 LVHA 顺序必须遵守）
- 用
!important强制提升:visited权重虽可行，但不推荐——它破坏可维护性，且某些 UA 会限制:visited !important的可用属性
调试时看不到 :visited 效果？检查这几个点
常见假“失效”，其实和顺序无关，而是环境或限制导致：
立即学习“前端免费学习笔记（深入）”；
- 链接必须是真实 HTTP(S) 协议下的历史访问记录；本地
file://页面中，:visited基本不可靠，多数浏览器直接禁用 - 确保链接有
href属性且值不为空（href="#"算有效，href=""在部分浏览器中不算） - Chrome / Firefox 对
:visited的样式限制越来越严——比如不能通过 JS 读取是否已访问，也不能用getComputedStyle获取:visited的颜色值，CSS 中也禁止使用渐变、阴影等复杂背景 - 开发时可手动访问一次该链接（点击或右键“在新标签页中打开”），再刷新页面验证
真正难处理的不是顺序，而是浏览器对 :visited 的主动削弱——它本就不是为了做复杂样式设计而存在的。能用纯 color 和 border-color 区分状态，已经是最稳妥的实践。
