Patrick H. Lauke 介绍了未来的 CSS 伪类 :focus-visible。我们正处于 浏览器支持的早期阶段，但它旨在解决一个尴尬的状况
… 当焦点样式作为鼠标/指针交互的结果应用时，它们通常是不希望的。一个经典的例子是按钮，它们会触发页面上的特定操作，例如推进轮播。虽然键盘用户能够看到他们的焦点何时位于按钮上非常重要，但对于鼠标用户来说，在他们点击按钮后发现按钮的外观发生了变化可能会令人困惑——让他们想知道为什么样式“卡住了”，或者按钮的状态/功能是否发生了某种变化。
如果我们使用 :focus-within 代替 :focus，则浏览器可以自由地不应用焦点样式，因为它认为没有必要，但在例如元素被 Tab 键切换到时仍然会应用。
令人害怕的部分是“代替”。我们可以直接切换，因为浏览器支持就是这样。甚至 @supports 也无法帮助我们。但 Patrick 有些想法。
button:focus { /* some exciting button focus styles */ }
button:focus:not(:focus-visible) {
/* undo all the above focused button styles
if the button has focus but the browser wouldn't normally
show default focus styles */
}
button:focus-visible { /* some even *more* exciting button focus styles */ }