CSS :visited伪类无法修改站点已访问链接对应图标颜色

问题场景 #

站点内存在大量样式完全一致、对应不同跳转链接的图标，通过Chrome的Stylish插件自定义站点样式时，初始写入的规则如下：

a:visited {color:grey;}

该规则对普通文本链接正常生效，可将已访问的文本链接改为灰色，但无法修改已访问链接对应图标的颜色。
已定位到控制图标颜色的CSS选择器：

[data-ma-theme=blue-grey] .playlist__actions:not(.track_page) a

已尝试的排查操作：

• 测试该选择器与:visited伪类的所有组合写法：包括调整:visited书写位置、增减a标签选择器
• 在Chrome DevTools样式面板中禁用所有可能覆盖自定义规则的其他站点样式
• 尝试将链接上的.___adv-binded、图标上的.zdmi类选择器与:visited组合使用
  以上操作均无法让:visited规则对图标生效，但同一选择器搭配:hover伪类时，可正常修改鼠标悬停状态下的图标颜色。
  目标图标及所属链接的DOM结构参考：

<a target="…" itemprop="…" href="…" class=" ___adv-binded ___adv-sape …" id="…" title="…">
  <span>
    <i class="zdmi…">…</i>
  </span>
</a>

失效根本原因 #

这是浏览器出于用户隐私保护设置的强制限制，和选择器写法、样式优先级无关：
为了防止恶意站点通过检测:visited样式变化窃取用户浏览历史，浏览器对:visited伪类的样式能力做了严格约束：

• 仅允许修改color、background-color、各类边框/分隔线颜色、轮廓色这类纯颜色属性，不支持修改布局、显示相关属性
• :visited状态下的样式仅能作用于链接<a>标签本身，无法被链接内部的子元素继承，也不能直接给子元素设置:visited关联样式

站点的图标颜色是直接设置在a标签内部的<i>/<span>子元素上的，:visited的样式没法穿透到这些子元素，自然不会生效。而:hover伪类没有这类隐私限制，所以可以正常控制子元素样式。

解决方法 #

如果站点图标是用图标字体（通过color属性控制颜色）实现的，可以通过强制子元素继承父链接颜色的方式实现效果，Stylish中写入如下规则即可：

/* 给已访问的图标链接设置灰色 */
[data-ma-theme=blue-grey] .playlist__actions:not(.track_page) a:visited {
  color: grey !important;
}
/* 强制链接内的图标相关元素、伪元素继承父级颜色 */
[data-ma-theme=blue-grey] .playlist__actions:not(.track_page) a:visited *,
[data-ma-theme=blue-grey] .playlist__actions:not(.track_page) a:visited::before,
[data-ma-theme=blue-grey] .playlist__actions:not(.track_page) a:visited::after {
  color: inherit !important;
}

如果站点图标是通过背景图、SVG fill、遮罩层等方式实现的，该方法无法生效——这类属性不在:visited允许修改的范围内，没有通用的绕过方案。

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