google-chrome - 无法覆盖 a:active 在 Google Chrome 中

Question

我有一个页脚菜单，结构如下：

<div class="footer-menu">
<nav>
  <a href="#home"><div class="button"><span class="active">Home</span></div></a>
  <div class="divider"> | </div>
  <a href="#katalog"><div class="button">Catalog</div></a>
  <div class="divider"> | </div> 
  <a href="#onas"><div class="button">Abous us</div></a>
  <div class="divider"> | </div>
  <a href="#novinky"><div class="button">News</div></a>
</nav>
</div>

然后我有 CSS 规则来覆盖颜色：

.footer-menu a, .footer-menu a:visited,
.footer-menu a:hover, .footer-menu a:active{
  text-decoration: none;
  color #686868 !important;
}

一切都很好，除了一件事 - ：活动颜色被 google-chrome-agent-style 覆盖（即使我添加了！important）（到一些丑陋的红色:( ）：

a:-webkit-any-link:active {
      color: -webkit-activelink;
}

通过 span 包装链接文本并给它一个类（如 Home）有一个部分解决方案，或者您可以“强制覆盖”用户代理样式

a:-webkit-any-link:active {
      color: #686868; /* or any other color*/
}

但是有没有办法以某种方式关闭用户代理风格？

提前致谢 ：）

Answer 1

不确定它是否只是一个错字，但你需要一个:后色。我最初是红色的，但结肠似乎对我有用。