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

Question

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

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

a {
    color: #000;

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

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

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

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

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

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

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

Answer 1

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

目前只有 Firefox 本身支持这一点，但是有一个 polyfill可以通过.focus-visible类名在所有浏览器中实现这一点。

Answer 2

伪:focus类不会根据元素最初如何进入焦点进行区分。事实上，仅靠 CSS 是不可能做到这一点的。至少您需要通过事件处理程序注释焦点元素。

和伪类在这里没有任何帮助，因为前者仅在鼠标指针位于元素上时适用，而后者仅在鼠标按钮按下时适用，即两种状态都不会像现在这样持续存在:hover，因为元素仍然存在即使鼠标指针离开该元素，该元素仍处于焦点状态，使其与通过 Tab 键接收焦点的元素无法区分。:active:focus