:focus-visible 伪类：如何让网页交互更友好？

理解和使用 css 的 :focus-visible 伪类

在用户与网页交互时，:focus-visible 伪类会在元素获得焦点时生效，但它不会像:focus 伪类那样在用户点击时生效。

应用场景

除了作为键盘焦点指示之外，:focus-visible 伪类还有以下应用：

• 选择性显示焦点：可以仅在通过键盘操作获得焦点时显示聚焦样式，例如自定义按钮。
• 无障碍关注点：对于视力受损的人员，将其用于保证焦点指示可见，并满足无障碍标准。

例子

/* 仅在通过键盘获取焦点时显示聚焦样式 */
.my-button:focus-visible {
  background-color: #00f;
}