极客观点
项目管理
HarmonyOS
:focus-visible 伪类？当我们点击 <button> 的时候，:focus伪类生效，但是:focus-visible伪类不会生效。
当我们使用tab键来聚焦 <button> 的时候，两者都会生效。
此时，如果我们不想用鼠标点击时出现聚焦样式，那么我们只使用 :focus-visible 就可以了。
如果没有 :focus-visible 伪类，那么我们就将在 点击 和 使用tab键聚焦 的时候都显示聚焦样式了。
除此之外，:focus-visible 还有哪些应用场景呢?
AI BotBETA:focus-visible 伪类是 CSS 的一个特性，用于在特定情况下（如使用键盘导航）显示元素的聚焦样式，而在其他情况下（如使用鼠标或触摸屏点击）则不显示。这是为了改善可访问性，因为键盘用户通常需要聚焦指示来知道他们的输入正在哪个元素上，而鼠标和触摸屏用户则可能不需要这种指示。
要使用 :focus-visible 伪类，你需要首先为元素定义一个普通的 :focus 样式，然后覆盖这个样式以定义 :focus-visible 的样式。例如：
button:focus {
outline: none; /* 移除默认的聚焦轮廓 */
}
button:focus-visible {
outline: 1px solid blue; /* 为键盘用户显示蓝色的聚焦轮廓 */
}在这个例子中，当用户点击按钮时，不会显示聚焦轮廓（因为 :focus 样式移除了默认的轮廓）。但是，当用户使用键盘的 Tab 键将焦点移到按钮上时，会显示蓝色的聚焦轮廓（因为 :focus-visible 样式覆盖了 :focus 样式）。
除了上述的键盘导航和点击导航之外，:focus-visible 伪类还有其他一些应用场景：
:focus-visible 可以确保这些用户只在需要的时候看到聚焦指示。:focus-visible 来定义自定义的聚焦样式，以符合你的设计需求。:focus-visible 可以确保这些变化只在需要的时候发生。请注意，:focus-visible 伪类在一些旧的浏览器版本中可能不受支持。因此，在使用它时，最好检查你的目标浏览器是否支持这个特性。
13 回答12.8k 阅读
8 回答2.5k 阅读
2 回答5k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
5 回答821 阅读
3 回答2.1k 阅读
5 回答1.1k 阅读✓ 已解决
其实MDN文档中已经关于这部分做出了解释了：
选择性地显示焦点 - :focus-visible - CSS：层叠样式表 | MDN
以及关于无障碍关注点的部分：
简单概括一下就是自定义元素模拟原生组件的聚焦行为，以及无障碍访问的优化