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;，结果即使在访问链接后仍保持发光状态。< / p>

我能做些什么吗？

在Firefox上，nav a:visited img规则根本没有得到确认。大概这是由于privacy concerns。

有没有办法让未访问的链接图像发光，并且访问过的链接图像不会发光？

Answer 1

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

颜色

背景颜色

border-color（及其子属性）

轮廓色

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