css - 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根本不承认该规则。这大概是出于隐私方面的考虑。

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

Answer 1

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

颜色

背景颜色

边框颜色（及其子属性）

轮廓颜色

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