如何理解和使用CSS的:focus-visible伪类?-灵析社区
你好我叫张倩话#### 什么时候使用 `:focus-visible` 伪类？ 当我们**点击** `` 的时候，`:focus`伪类生效，但是`:focus-visible`伪类不会生效。 当我们**使用tab键** 来聚焦 `` 的时候，两者都会生效。 此时，如果我们不想用鼠标点击时出现聚焦样式，那么我们只使用 `:focus-visible` 就可以了。 如果没有 `:focus-visible` 伪类，那么我们就将在 **点击** 和 **使用tab键聚焦** 的时候都显示聚焦样式了。 除此之外，`:focus-visible` 还有哪些应用场景呢?
NKTDYD其实MDN文档中已经关于这部分做出了解释了：
«选择性地显示焦点
自定义控件，比如按钮"自定义元素"，可以使用 ":focus-visible"
使其仅在键盘操作时才显示焦点样式。这和"" (https://link.segmentfault.com/?enc=KalHfikM4qRsHUq0RC%2F%2Fyg%3D%3D.GlX94D6DKfV3A2wh0%2Fe%2FWW%2B6rXngjNKd2izPXWBb5j0aP4WdXt2PduPBUMQ17xiRVPiXWntNj1gq2xr0XWHWStO2Cr8QQxqIQMRsnYwwoH0%3D)一类的原生控件表现一致。»
"选择性地显示焦点 - :focus-visible - CSS：层叠样式表 | MDN" (https://link.segmentfault.com/?enc=dEwoPnrPm2Zf6CaUfMbB%2Fw%3D%3D.CWTfh02Poj4CfvrO13qZnA7tff8sf%2BChZGLuDscr%2Fl9JrQQbBQZBqxVRA7%2BAIh6K5b1G592KKrTlUQny0dhVxVbzB0zMPxei7i3H1ycb%2B51hptfu%2Bl6UvgmfZfb258qr1K%2BdKcusGUJYWs8GCi7OPGYMem8kuNjKefORyL%2F2AB%2FduSZiME9HnW5aWxD84B1P)
以及关于无障碍关注点 的部分：
«无障碍关注点
保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 "WCAG 2.1 SC 1.4.11 Non-> Text
Contrast" (https://link.segmentfault.com/?enc=7VqRa6vPWCpDsrl7x0nAEA%3D%3D.3kfRMydesoUj24LBdb6V7JPRBm6NfSEsq8oDaaOj8osOe9GZFQ%2BS20XtLcVp14gs%2B6J%2F8gNXRcBQqmbV5fvEU0zP%2B1HKUIVTc9zbWpRef4o%3D)
要求视觉焦点指示至少在 3 到 1。可访问的视觉焦点指示："给你的网站一些焦点！设计有效且可用的焦点指示的一些建议" (https://link.segmentfault.com/?enc=hO4uI7qf4tudt%2FvvRtPCDg%3D%3D.n8v6mSaOMxlO5KpecSFYFwSUwLBlly6yJ%2BKmAqp61uzyf%2BDy2vWRrzfltQeMee0TUShTd2UAd2R99%2BoFnnNHiQuTmxd9sk5RkfUALFy5U3SUcKkgaRzsDW%2Bbv9%2BMfVqf)。»
***
简单概括一下就是自定义元素模拟原生组件的聚焦行为，以及"无障碍" (https://link.segmentfault.com/?enc=LALZPRyg5tsR3tGcDhfamg%3D%3D.wxWI%2BmBtN2qulF%2BNWn%2B9SiAFEi2KbhEOc87GRjlMkgNCPPxNkGB9o0Olm7J0jdLVwwA%2BjnDNnaK1134FVNfAEQ%3D%3D)访问的优化