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

Question

我想在使用 Tab 键聚焦<a>标签时将样式应用于该标签。问题是，当我通过鼠标单击激活<a>时，:focus也会被触发。

我该怎么做？

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>