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

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

: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;  
}