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

对于任何需要它的人，这里有一个（非常现代的）解决方案，使用:focus-visible而不是:focus（链接不会转到任何地方，以便您可以看到解决方案的实际效果）：

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

a:active {
  outline: none;
}

<a href="javascript:void(0)">FOO LINK</a>

如果您尝试Tab键到上面代码片段中的元素，则会显示大纲;如果你尝试直接点击它，轮廓将显示not.
:focus-visible的功能与:focus相同，除了:focus样式无论如何都应用于焦点元素，:focus-visible让浏览器确定（通过一些涉及焦点环的计算）是否需要焦点元素的样式。我自己也不太明白这一点，所以为了更好地解释这一点，并比我能提供的更多澄清，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#focus_vs_focus-visible。
如果你担心浏览器的兼容性，是的，这是一个相当新的功能（可能是为什么这在以前的答案中没有提到，虽然他们不是很久以前）。请参阅here了解一些细节。希望这个答案能帮助到别人。请随意编辑这个答案，使它更好，因为我不是一个伟大的回答者。

试试这个

a {
  color: @brand-link;

  &:focus {
    outline: none;
  }

}