如何理解和使用CSS的:focus-visible伪类?
站长
· 阅读数 3
什么时候使用 :focus-visible 伪类？
当我们点击 <button> 的时候，:focus伪类生效，但是:focus-visible伪类不会生效。当我们使用tab键来聚焦 <button> 的时候，两者都会生效。
此时，如果我们不想用鼠标点击时出现聚焦样式，那么我们只使用 :focus-visible 就可以了。如果没有 :focus-visible 伪类，那么我们就将在 点击 和 使用tab键聚焦 的时候都显示聚焦样式了。
除此之外，:focus-visible 还有哪些应用场景呢?
回复
1个回答
test
2024-06-20
其实MDN文档中已经关于这部分做出了解释了：
选择性地显示焦点
自定义控件，比如按钮
自定义元素，可以使用:focus-visible使其仅在键盘操作时才显示焦点样式。这和<button>一类的原生控件表现一致。
选择性地显示焦点 - :focus-visible - CSS：层叠样式表 | MDN
以及关于无障碍关注点的部分：
无障碍关注点
保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 WCAG 2.1 SC 1.4.11 Non-Text Contrast 要求视觉焦点指示至少在 3 到 1。
可访问的视觉焦点指示：给你的网站一些焦点！设计有效且可用的焦点指示的一些建议。
简单概括一下就是自定义元素模拟原生组件的聚焦行为，以及无障碍访问的优化
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容