在网站开发中，确保用户能够轻松地浏览和操作页面是非常重要的。CSS 焦点样式是一种有效的方式，可以直观地展示页面中哪个元素被选中了。
本文介绍了 4 种处理 CSS 焦点样式的方式，每种方式都附有简单的示例，帮助你快速掌握这些技巧。
什么是 CSS 焦点样式？
CSS 焦点样式是一种视觉效果，用于突出显示页面中当前被选中的元素。
它对使用键盘、屏幕阅读器或其他辅助工具导航的网站用户尤为重要。
良好的焦点样式可以显著提升网站的可访问性，让用户更方便地交互。
1. :focus
:focus 选择器在元素被选中（如通过点击或键盘切换）时生效。
/* 为选中的元素添加样式 */
input:focus, textarea:focus, button:focus {outline: 2px solid blue; /* 为选中元素添加蓝色边框 */
}说明：
当用户点击或使用键盘选中 input、textarea 或 button 时，蓝色的边框会出现，明确地指示当前的焦点位置。
2. :focus-visible
:focus-visible 是一种更智能的焦点样式，只在需要时（通常是键盘导航）显示，避免鼠标点击时触发焦点效果。
/* 仅键盘操作时显示的焦点样式 */
input:focus-visible, textarea:focus-visible, button:focus-visible {outline: 2px solid green; /* 键盘导航时显示绿色边框 */
}说明：
使用 :focus-visible，当用户通过键盘导航到某个元素时，会显示绿色边框；而通过鼠标点击时不会触发，这样可以保持页面更整洁。
3. :focus-within
:focus-within 是一种父级样式，当其子元素获得焦点时，父级会被应用样式。
/* 为包含选中子元素的容器添加样式 */
.form-container:focus-within {border: 2px solid purple; /* 为容器添加紫色边框 */
}说明：
如果 form-container 中的任意子元素（如输入框）获得焦点，整个容器会添加紫色边框。这种方式非常适合表单设计，突出显示当前交互区域。
4. 自定义组合焦点样式（:focus-visible-within）
虽然 CSS 没有直接提供 :focus-visible-within，但我们可以通过组合 :focus-visible 和 :focus-within 来实现类似效果。
/* 清除默认焦点样式 */
:focus-visible, :focus-within {outline: none;
}/* 自定义焦点样式 */
:focus-visible:focus-within {border: 2px solid orange; /* 为选中元素及其容器添加橙色边框 */
}说明：
此方案先移除默认的 outline 样式，保持页面简洁，然后通过组合选择器为选中元素及其容器添加橙色边框，使视觉效果更加美观。
总结
良好的焦点样式设计可以提升网站的用户体验，尤其是对依赖键盘或辅助技术的用户。
以下是 4 种主要焦点样式的特点：
**
:focus**：基础焦点样式，用于所有选中元素。**
:focus-visible**：仅在键盘导航时显示焦点样式。**
:focus-within**：为容器及其子元素提供样式支持。自定义组合样式：结合
:focus-visible和:focus-within，实现更精细的焦点样式。
结合实际需求应用这些方法，为你的用户打造更加友好的网页体验！
最后：
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读