CSS 中区分：通过 Tab 键获得焦点和：通过单击获得焦点

虽然我很确定我的问题的答案是“做不到”，但我想确定一下并在这里问你们。

我有一个相当典型的场景，我想通过我的网站启用选项卡（即使用键盘上的选项卡键）。用户刚刚点击的项目应该通过 CSS 进行视觉标记。到目前为止，一切都很好。显然，这需要焦点伪类：

a {
    color: #000;

    &:hover {
        color: lighten(#000, 10%); // discreet change
    }

    &:focus {
        background-color: green; // extreme change
    }
}

但我只想在用户通过页面切换时应用此样式。当用户悬停或单击某个元素时，样式应该有所不同。

示例：用户悬停或单击锚点。然后，视觉辅助可以是谨慎的，因为用户已经知道他与哪个元素进行了交互。但当他浏览页面时，他不能那么确定，因此样式应该更加激进。

我遇到的问题是：一个元素在选项卡页面和单击页面上应用了焦点样式。

是否有一种仅 CSS 的方法可以仅在元素通过 Tab 键获得焦点时应用样式？

再说一遍，我很确定这是不可能的，但只是为了确保我已经问了这个问题。

有一个新的 CSS 选择器:focus-visible旨在通过仅定位通过键盘输入聚焦的元素来解决这种情况。

目前仅 Firefox 本身支持此功能，但是有填充物 https://github.com/WICG/focus-visible这使得这在所有浏览器中都成为可能.focus-visible班级名称。