
理解和使用 css 的 :focus-visible 伪类
在用户与网页交互时,:focus-visible 伪类会在元素获得焦点时生效,但它不会像:focus 伪类那样在用户点击时生效。
应用场景
除了作为键盘焦点指示之外,:focus-visible 伪类还有以下应用:
- 选择性显示焦点:可以仅在通过键盘操作获得焦点时显示聚焦样式,例如自定义按钮。
- 无障碍关注点:对于视力受损的人员,将其用于保证焦点指示可见,并满足无障碍标准。
例子
/* 仅在通过键盘获取焦点时显示聚焦样式 */
.my-button:focus-visible {
background-color: #00f;
}










