CSS focus 样式是用于突出显示页面中被选中元素的一种特效。这对使用键盘或其他工具导航网站的人非常有帮助。

良好的 focus 样式可以让你的网站更易于使用。

:focus 样式在元素被选中时添加，无论是通过点击还是键盘选择。

/* 为选中的元素设置样式 */
input:focus, textarea:focus, button:focus {
    outline: 2px solid blue; /* 为选中的元素添加蓝色边框 */
}

解释：

在这个例子中，当用户选择一个 input、textarea 或 button 时，会出现一个蓝色的边框。

:focus-visible 样式在真正需要时才显示，通常是为键盘用户设置的，可以避免鼠标点击时显示 focus 样式。

/* 为键盘焦点元素设置样式 */
input:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid green; /* 仅为键盘导航添加绿色边框 */
}

解释：

使用 :focus-visible 时，绿色边框仅在使用键盘选择元素时出现，而不是鼠标点击。这让页面更整洁，也更适合键盘用户。

:focus-within 样式在子元素被选中时添加到父元素上，用于突出显示部分或组元素。

/* 为包含选中子元素的容器设置样式 */
.form-container:focus-within {
    border: 2px solid purple; /* 为整个容器添加紫色边框 */
}

解释：

当 .form-container 中的任意一个元素被选中时，整个容器会显示紫色边框。这使得当前活跃的表单部分更明显。

虽然没有内置的 :focus-visible-within 样式，但你可以结合 :focus-visible 和 :focus-within 创建类似的效果。

/* 为选中元素及其容器自定义样式 */
:focus-visible {
    outline: none; /* 删除默认的外边框以获得更简洁的外观 */
}

:focus-within {
    outline: none; /* 删除默认的外边框以获得更简洁的外观 */
}

:focus-visible:focus-within {
    border: 2px solid orange; /* 为选中元素及其容器添加橙色边框 */
}

解释：

我们首先移除默认的外边框以保持简洁，然后为选中元素及其容器添加橙色边框，使其看起来既漂亮又易于识别。

良好的 focus 样式让你的网站更易于使用，特别是对依赖键盘的用户来说。

这四种方法——:focus、:focus-visible、:focus-within 和自定义的 :focus-visible-within 各有优势。选择合适的方法可以提高访问者的使用体验。

尝试这些方法，找到最适合你网站的方式，确保你的 focus 样式帮助用户轻松导航。