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

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给你看.
关于

:hover

、

:active

和

:focus

之间差异的信息非常丰富。

:link

表示尚未访问过的元素。 参考

编辑：
解决方案是：

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

Answer 2

对于任何需要它的人，这里有一个使用

:focus-visible

而不是

:focus

的解决方案（该链接不会转到任何地方，以便您可以看到正在运行的解决方案）：

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

a:active {
  outline: none;
}

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

如果您尝试使用 Tab 键切换到上面代码片段中的元素，则会显示轮廓；如果您尝试直接单击它，则不会显示轮廓。

:focus-visible

的功能与

:focus

相同，除了

:focus

样式无论如何都会应用于焦点元素，

:focus-visible

让浏览器确定（通过一些涉及焦点环的计算）是否为焦点元素设置样式需要元素。我自己也不太明白这一点，所以为了更好地解释这一点和比我能提供的更多说明，请参阅：

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus -visible#focus_vs_focus-visible

. 如果您担心

浏览器兼容性

，是的，这是一个相当新的功能（这可能是为什么在之前的答案中没有提到这一点，尽管它们是不久前的）。请参阅此处了解一些具体信息。我希望这个答案对某人有所帮助。请随意编辑这个答案并使其变得更好，因为我不是一个很好的回答者。

Answer 3

a {
  color: @brand-link;

  &:focus {
    outline: none;
  }

}