css - 区分:focus via tab-key and :focus via click in CSS

Question

虽然我很确定我的问题的答案是“无法完成”，但我还是想确定一下，并在这里问问你们。

我有一个相当典型的场景，我想在我的网站上启用 Tab 键(即使用键盘上的 Tab 键)。用户刚刚点击的元素应该通过 CSS 进行可视化标记。到目前为止，一切都很好。显然，这需要焦点伪类:

a {
    color: #000;

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

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

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

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

我遇到的问题是:一个元素在标签页面和点击它时都应用了焦点样式。

是否有仅当元素通过 Tab 键获得焦点时才应用样式的纯 CSS 方法？

同样，我很确定这是不可能的，但只是为了确定我已经提出了这个问题。

Answer 1

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

目前只有 Firefox native 支持，但是有 a polyfill这使得通过 .focus-visible 类名在所有浏览器中成为可能。