在网站开发中，确保用户能够轻松地浏览和操作页面是非常重要的。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，实现更精细的焦点样式。