使用Tab键聚焦元素时，如何设置元素的样式？

Question

我想使用Tab键将样式集中到<a>标记上。问题是，当我用鼠标单击激活:focus时，也会触发<a>。

我该怎么做？

Answer 1

您可以使用以下解决方案：

a, a:link, a:active {
  color:green;
}
a:focus:not(:active) {
  color:yellow;
}

<a href="#">Test #1</a>
<a href="#">Test #2</a>
<a href="#">Test #3</a>
<a href="#">Test #4</a>