仅在选项卡上显示元素轮廓，但不在单击时显示

Question

如果我转到 developer.mozilla.org 并在下拉菜单中使用 Tab 键，我会得到带有轮廓的元素，这对于可访问性来说完全没问题：

但是如果我点击它，我看不到大纲：

我已经尝试通过仅使用伪类 :focus 来实现这一点，排除 :active 但它仍然不起作用:

a {
  color: @brand-link;

  &:focus:not(:active) {
    outline: -webkit-focus-ring-color auto 5px;
  }
  &:active {
    outline: none;
  }

}

有人知道如何严格只为标签导航而不是点击元素实现轮廓吗？

顺便说一句，我用得少了。

这里有一个例子，如果你点击它，它会勾勒出轮廓 gold 颜色：

a:focus {
   outline: 4px solid gold;
}

a:active {
  outline: none;
}

<a href="/">FOO LINK</a>

我希望金色仅在选项卡导航中可见，但在单击元素时不可见

Answer 1

试试这个

a {
  color: @brand-link;

  &:focus {
    outline: none;
  }

}

Answer 2

:active 是点击时触发的伪 class。

a:link:active{outline:10px dotted #000;}

:link代表一个还没有被访问过的元素。 reference

编辑：
解决方案是：

a:focus:not(:link:active) {  
outline: -webkit-focus-ring-color auto 5px;  
}

Show element outline only on tab but not on click