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

Question

如果我转到developer.mozilla.org 并通过下拉菜单选项卡，我会得到带有轮廓的元素，这对于可访问性来说完全没问题：

但是如果我点击它，我没有得到大纲：

我已经尝试通过只使用伪类来实现这一点 :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 是点击时触发的伪类。

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

将准确显示此 onclick。 jsfiddle for you to see.
Very informative post on differences between :hover, :active, and :focus.

:link 表示尚未访问的元素。 reference

编辑：
解决方案是：

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