为已访问链接的父元素设置样式：代码失效问题求助

我明白你已经知道浏览器对:visited伪类有隐私限制，但还是困惑为什么自己的代码没生效对吧？咱们一步步拆解问题：

为什么你的测试代码看起来没效果？ #

浏览器对:visited的隐私限制核心是禁止通过样式或脚本推断用户的浏览历史，但color属性是少数被允许修改的样式之一。你的代码本身语法没问题，问题出在测试链接上：

• 你用的https://gooooooooogle.com是一个不存在的域名，大概率你从未访问过它，所以:visited样式自然不会触发。
• 部分浏览器（比如Chrome）会对从未访问过的链接强制沿用默认样式，就算你写了自定义样式也不会生效。

验证:visited样式的正确方法 #

如果你想确认样式能正常工作，把测试链接换成一个你确实访问过的域名就行。这里给你调整后的代码，你可以替换成自己常去的网站试试：

<style>
div { padding: 1em; }
.inner { background-color: greenyellow; }
.outer { background-color: yellow; }
a:link { color: rgb(0, 138, 206); }
a:visited { color: rgb(180, 0, 180); }
/* 加个hover样式做对比，确保选择器逻辑没问题 */
a:hover { color: red; }
</style>
<div class="outer">
  <div class="inner">
    <a href="https://example.com">替换成你访问过的链接...</a>
  </div>
</div>

关于:visited隐私限制的补充提示 #

虽然你已经了解相关限制，还是再明确下目前浏览器允许修改的:visited属性只有这几类：

• color
• background-color
• border-color（包括细分的border-top-color等）
• outline-color
• column-rule-color
• 以及依赖这些属性的currentColor值

其他属性（比如字体大小、元素位置、display属性等）就算设置了，浏览器也会自动忽略，避免通过样式差异泄露用户的浏览历史。

内容的提问来源于stack exchange，提问作者john c. j.