Question

虽然我很确定我的问题的答案是＆＃34;无法完成＆＃34;我想确定并在这里问你们。

我有一个相当典型的场景，我希望通过我的网站启用标签（即使用键盘上的Tab键）。用户刚刚选中的项目应通过CSS直观标记。到现在为止还挺好。显然，这需要focus-pseudo类：

a {
    color: #000;

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

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

但我想仅在用户选中页面时才应用此样式。当用户悬停或点击元素时，样式应该是不同的。

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

我遇到的问题是：一个元素在页面上点击并点击它时会应用焦点样式。

是否只有CSS才能在元素通过Tab键聚焦时应用样式？

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

Answer 1

:focus伪类不会根据元素首先进入焦点的方式进行区分。事实上，只有CSS这是不可能的。至少你需要通过事件处理程序注释焦点上的元素。

:hover和:active伪类在这里没有任何帮助，因为前者仅在鼠标指针位于元素上时适用，而后者仅在鼠标按钮关闭时适用，即两个状态都不会保持:focus的方式，因为即使鼠标指针离开元素后元素仍然处于焦点，使得它与通过制表符号获得焦点的元素无法区分。

Answer 2

就这样列出这个替代答案（我也选择了，tbh）：

也可以使用javascript来禁用mousedown-event。此事件实际上并不那么有用，click-event仍然有效，它可以防止被点击的元素获得焦点状态。反过来，这使得CSS中的：focus属性再次变得有用，因为它现在仅在用户通过tab键导航该元素时触发。

Answer 3

我对纯CSS没有任何好运，所以我写了一个简单的fiddle：

statuses

Answer 4

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

仅今天的Firefox才支持此功能，但是a polyfill可以通过.focus-visible类名在所有浏览器中实现此功能。

区分：通过tab键进行聚焦和：通过CSS单击进行聚焦

4 个答案: