强大的CSS：focus-visible伪类真的太6了！

CSS 的 :focus 伪类是用来为具有焦点的元素制定样式的，比如输入框获得焦点时可以改变其边框颜色等。但是，在用户使用键盘和鼠标切换焦点时，往往会出现一些不必要的视觉效果，这些效果通常不是我们想要的。例如，当我们点击一个链接时，链接会出现一个虚线边框，这在表单元素上看起来很自然，但是在其他元素上出现这个样式时，就变得很奇怪了。

此时，我们就需要使用 :focus-visible 伪类了，这个伪类只会在用户通过键盘或程序获取焦点时才应用，而不会在用户通过鼠标或其他非键盘交互（例如纯 CSS 悬停）时应用，所以它可以帮助我们消除那些不必要的焦点效果，在视觉上缩小键盘和鼠标导航之间的差距。

下面我来详细介绍一下 :focus-visible 伪类的用法和优点。

## 用法

使用 :focus-visible 伪类有两种方法：

### 1. 直接使用

可以通过以下方式直接使用 :focus-visible 伪类：

:focus-visible {
  outline: 2px solid red;
}

当元素的内容由键盘或程序输入事件获得焦点时，元素将出现一个红色的描边，当元素通过鼠标点击或其他非键盘事件获得焦点时，这个样式将不会应用。

### 2. 组合使用

也可以将 :focus 和 :focus-visible 伪类组合起来使用，这样可以兼容不支持 :focus-visible 的浏览器：

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid red;
}

这里的 条规则会将所有非 :focus-visible 的焦点元素的描边去掉，第二条规则会只为 :focus-visible 元素添加描边样式，这样通过鼠标等非键盘事件获得焦点的元素不会出现描边。

## 优点

使用 :focus-visible 伪类的主要优点如下：

### 1. 提高可访问性

:focus-visible 伪类可以提高页面的可访问性，因为它使键盘和鼠标导航具有相同的视觉效果，这样用户就可以根据自己的偏好选择不同的交互方式，而不会因为视觉效果的不同而导致不必要的困惑。

### 2. 提高用户体验

使用 :focus-visible 伪类可以提高用户体验，因为它可以使用户在使用键盘时更方便地找到焦点元素，而不必再关注到底哪个元素具有焦点。

### 3. 简化 CSS 代码

通过使用 :focus-visible 伪类，可以简化 CSS 代码，因为不需要再手动设置样式来消除那些不必要的焦点效果，这些样式将自动应用到通过键盘或程序获取焦点的元素上。

## 总结

focus-visible 伪类的使用可以提高页面的可访问性和用户体验，同时也可以简化 CSS 代码。如果您正在使用键盘导航设计网站，这将是非常好的选择，为用户提供一种更统一的用户体验，特别是对于身体上有不便的人。