CSS 伪类

CSS 伪类 :focus-visible表示已获得焦点的元素。该类通常在用户单击、点击某个元素或使用键盘的 Tab 键选择某个元素时触发。

:focus-visible 伪类可用于应用不同的焦点指示符，如根据用户的首选功能模式（使用鼠标或键盘）。

语法

:focus-visible {
   /* ... */
}

:focus 与 :focus-visible

:focus CSS 中的 :focus-visible 伪类用于定位当前具有键盘焦点的元素，但它们的行为不同，特别是在用户体验和可访问性方面。

:focus:focus-visible
定位具有键盘焦点的元素，无论该焦点是通过键盘导航还是通过鼠标单击获得的。定位具有键盘焦点但仅在使用键盘导航时可见的元素。它确保仅当通过键盘输入聚焦元素时而不是通过鼠标或触摸输入聚焦时应用样式，从而有助于改善用户体验。
它不需要考虑到用户如何到达焦点元素，因此它可以包括用户使用鼠标单击元素或在触摸设备上点击元素的情况。这对于创建更易于访问和使用的元素特别有用为键盘用户提供用户友好的体验，因为它可以避免在使用鼠标单击时对元素应用潜在的分散注意力或不相关的样式。
a:focus {
// 元素样式
//有键盘焦点
} 
button:focus-visible {
//元素的样式
//有键盘焦点
//并且通过可见
//键盘导航
}

CSS :focus-visible 示例

让我们看一个示例，它显示了 :focus 和 :focus-visible 的区别。尝试使用鼠标和键盘将焦点放在按钮上，看看差异。

<html>
<head>
<style> 
   /* 仅当通过键盘导航访问时应用焦点样式 */
   button:focus-visible {
      outline: 2px solid green;
      background-color: yellow;
      }

   /* 对所有焦点元素应用焦点样式 */
   button:focus {
      outline: 3px solid blue;
   }
</style>
</head>
<body>
   <div>
      <button>focus-visible</button>
      <button>focus-only</button>
   </div>
</body>
</html>

下面是一个经典的按钮示例，它展示了选择器 :focus-visible 如何与 :focus 区分开来。我们通常不希望在单击按钮后看到聚焦环，但我们希望在使用键盘导航网站时看到按钮上的焦点指示器。在下面的示例中，尝试使用键盘然后按 Tab 键来查看 :focus-visible 如何通过键盘和 Tab 键帮助我们解决对焦环问题。

<html>
<head>
<style>
   label {
      display: grid;
      font-size: 18px;
      color: black;
      width: 400px;
   }

   select {
      padding: 10px 16px;
      font-size: 16px;
      color: black;
      background-color: #fff;
      border: 1px solid #597183;
      border-radius: 8px;
      margin-top: 25px;
      width: 300px;
      transition: all 0.3s ease;
   }

   .focus-only:focus {
      outline: 3px solid orange;
   }

   .focus-visible-only:focus-visible {
      outline: 4px dashed aqua;
   }
</style>
</head>
<body>
    <p>Compare what happens when you click on buttons with a mouse, versus when you tab through them using a keyboard. </p>
   <button class="focus-only"> focus-only button</button><br><br>
   <button class="focus-visible-only"> focus-visible button</button><br><br>
</body>
</html>

CSS :focus - Fallback

检查浏览器对 :focus-visible 与 @supports 的支持和兼容性，并在 :focus 规则中重复相同的样式，看看它是否正常工作是否在旧浏览器中。即使您根本无法为 :focus 指定任何内容作为后备选项，旧浏览器也会显示本机默认轮廓。这在以下语法中进行了演示:

button:focus { /* some exciting button focus styles */ }

@supports (:focus-visible) {
      button:focus { /* undo all the above focused button styles */ }
      button:focus-visible { /* and then reapply the styles here instead */ }
}