CSS疑问：已访问链接hover时背景色不生效的原因

当鼠标悬停在已访问链接上时，文字颜色能正常变化，但背景色无法生效。发现为<a>元素设置初始背景色后问题解决，想了解该现象的原因。

代码示例 #

CSS

a {
  text-decoration: none;
  color: inherit;
}

.link-1:visited,
.link-2:visited {
  color: violet;
}

.link-2 {
  background-color: yellow;
}

.link-1:visited:hover {
  color: cyan;
  background-color: orange;
}

.link-2:visited:hover {
  color: cyan;
  background-color: orange;
}

HTML

<a href="https://stackoverflow.com" class="link-1">Link 1, without inital bg</a>
<br/>
<a href="https://stackoverflow.com" class="link-2">Link 2, with initial bg</a>

原因解释 #

这是浏览器的隐私保护机制导致的。

为了防止恶意网站通过检测:visited状态下的样式变化来追踪用户浏览历史，浏览器对:visited伪类可设置的样式做了严格限制：

• 仅允许修改color、background-color、border-*-color等少数颜色相关属性，且存在额外约束。
• 核心规则：如果某个属性在元素默认（未访问）状态下没有显式设置值，那么在:visited及其组合伪类（如:visited:hover）中设置该属性将不会生效。

对应你的例子：

• .link-1未设置初始background-color，属于“未显式定义”状态，因此:visited:hover中的background-color: orange被隐私规则拦截，无法生效。
• .link-2显式设置了background-color: yellow，相当于为该属性开启了可修改权限，所以:visited:hover中的背景色设置能正常生效。

简言之，浏览器要求：要在:visited相关状态下修改某个属性，必须先在元素默认状态下显式声明该属性的初始值，否则会被隐私保护机制屏蔽。

内容的提问来源于stack exchange，提问作者Shahriar