html - 更改焦点上的链接颜色但不单击(鼠标或键盘单击)

Question

我想在用户通过使用 TAB 键导航到它时将焦点放在链接上时更改链接的颜色。 这是简单的部分，因为它是这样完成的:

a:focus{ color: red; }

问题是，链接在激活时也显示为红色，例如:当用户单击“ENTER”键或单击鼠标左键时。

如何防止这种副作用并仅在用户使用“TAB”键关注链接时保持颜色？

我试过这个:

a:focus{ color: red; }
a:active{ color: blue; }

(蓝色为默认颜色) 它没有用，发生的事情是它首先将链接变成蓝色，然后在一瞬间变成红色......

我需要对我网站上的每个链接都这样做，所以我不想使用任何复杂的 javascript 代码来做到这一点，并希望只在 CSS 中做到这一点。

有什么建议吗？

编辑:我也试过这个:

a:active:focus{ color: blue; }

为了捕捉元素聚焦和事件的状态，所以我可以覆盖“焦点”CSS。 它也没有用。

Answer 1

问题是规则的顺序。

a:link
a:visited
a:hover
a:active
a:focus

焦点 必须是最后一个。 我试过了，效果很好。