前端 - 如何理解和使用CSS的:focus-visible伪类?
什么时候使用 :focus-visible 伪类？
当我们点击 <button> 的时候，:focus伪类生效，但是:focus-visible伪类不会生效。
当我们使用tab键来聚焦 <button> 的时候，两者都会生效。
此时，如果我们不想用鼠标点击时出现聚焦样式，那么我们只使用 :focus-visible 就可以了。
如果没有 :focus-visible 伪类，那么我们就将在 点击 和 使用tab键聚焦 的时候都显示聚焦样式了。
除此之外，:focus-visible 还有哪些应用场景呢?
共有2个答案
其实MDN文档中已经关于这部分做出了解释了：
选择性地显示焦点
自定义控件，比如按钮
自定义元素，可以使用:focus-visible使其仅在键盘操作时才显示焦点样式。这和<button>一类的原生控件表现一致。
选择性地显示焦点 - :focus-visible - CSS：层叠样式表 | MDN
以及关于无障碍关注点的部分：
无障碍关注点
保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 WCAG 2.1 SC 1.4.11 Non-Text Contrast 要求视觉焦点指示至少在 3 到 1。
可访问的视觉焦点指示：给你的网站一些焦点！设计有效且可用的焦点指示的一些建议。
简单概括一下就是自定义元素模拟原生组件的聚焦行为，以及无障碍访问的优化
: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 伪类在一些旧的浏览器版本中可能不受支持。因此，在使用它时，最好检查你的目标浏览器是否支持这个特性。
-
鸿蒙os如何实现focus类似动画鼠标点击效果 我想实现css那种鼠标点击效果
-
本文向大家介绍前端开发之CSS原理详解，包括了前端开发之CSS原理详解的使用技巧和注意事项，需要的朋友参考一下 前端开发之CSS原理详解 从事Web前端开发的人都与CSS打交道很多，有的人也许不知道CSS是怎么去工作的，写出来的CSS浏览器是怎么样去解析的呢？当这个成为我们提高CSS水平的一个瓶颈时，是否应该多了解一下呢？ 一、浏览器的发展与CSS 网页浏览器主要通过 HTTP 协议连接
-
本文向大家介绍如何理解前端模块化？相关面试题，主要包含被问及如何理解前端模块化？时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 前端模块化就是复杂的文件编程一个一个独立的模块，比如js文件等等，分成独立的模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了commonJS规范，AMD，CMD规范等等，以及用于js打包（编译等处理）的工具webpack
-
本文向大家介绍CSS的伪类和伪对象有什么不同？相关面试题，主要包含被问及CSS的伪类和伪对象有什么不同？时的应答技巧和注意事项，需要的朋友参考一下 伪类：我们常用的比如，hover，focus等，我认为伪类是为了弥补选择器的不足。还有伪类选择器，比如first-child,nth-child. 伪元素 : ::before ::after 是为了创建一个dom元素，使用content属性指定要插入
-
主要内容：1、first-child,2、last-child,3、nth-child伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。 伪类的名称不区分大小写，但需要以冒号 开头。另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：
-
本文向大家介绍CSS 伪类，包括了CSS 伪类的使用技巧和注意事项，需要的朋友参考一下 示例 伪类是允许基于文档树之外或其他选择器或组合器无法表达的信息进行选择的关键字。该信息可以与某个状态（状态和动态伪类），位置（结构和目标伪类），前者的否定（否定伪类）或语言（lang伪类）相关联。示例包括是否跟随链接（:visited），鼠标悬停在元素上（:hover），复选框是否选中（:checked）等。