CSS：-webkit-filter 和 filter 之间的冲突

Question

我有一个使用图像作为链接的导航栏，如下所示：

<nav>
  <ul>
    <li>
      <a href="#link">
        <img src="img/link.png">
      </a>
    </li>
  </ul>
</nav>

要围绕未访问的链接创建发光，我有以下 CSS：

nav a img {
  -webkit-filter: drop-shadow(0px 0px 8px #fff);
  -o-filter: drop-shadow(0px 0px 8px #fff);
  -ms-filter: drop-shadow(0px 0px 8px #fff);
  filter: drop-shadow(0px 0px 8px #fff);
}

nav a:visited img {
  -webkit-filter: none;
  -o-filter: none;
  -ms-filter: none;
  filter: none;
}

在 Chrome 中，nav a img 规则适用-webkit-filter: drop-shadow(0px 0px 8px #fff);，nav a:visited img 规则适用filter: none;，因此即使在访问链接后发光仍然存在。

对此我有什么办法吗？

在 Firefox 上，nav a:visited img 规则根本不被承认。大概是因为privacy concerns。

有没有办法让未访问的链接图像发光，而已访问的链接图像不发光？

Answer 1

:visited 元素唯一可以更改的属性是：

颜色

背景色

边框颜色（及其子属性）

轮廓颜色

填充和描边属性的颜色部分