异常教程
CSS :focus 选择器（一文讲透）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
在网页开发中，用户与页面的交互往往通过键盘或鼠标完成。无论是填写表单、点击按钮，还是导航链接，CSS :focus 选择器都扮演着至关重要的角色——它决定了用户聚焦在某个元素时的视觉反馈。对于编程初学者而言，理解 :focus 的基本用法可以提升表单的可访问性；而中级开发者则可以通过高级技巧，实现更复杂的交互效果。本文将从基础到实践，系统解析 CSS :focus 的核心概念、应用场景及优化方法。
什么是 CSS :focus 选择器？
CSS :focus 是一个伪类选择器，用于定义当元素处于“聚焦”状态时的样式。简单来说，当用户通过键盘（如 Tab 键）或鼠标（如点击）选中某个可交互元素（如按钮、输入框、链接）时，该元素就会触发 :focus 状态。
形象比喻：
可以将 :focus 状态想象为舞台灯光——当用户将注意力集中在某个元素上时，它就会被“打上高光”，从而与其他元素区分开来。
基础语法示例
input:focus {
outline: 2px solid blue;
background-color: #f0f8ff;
}
上述代码表示，当输入框被聚焦时，会显示蓝色边框并改变背景色。
:focus 与 :hover 的区别
虽然 :focus 和 :hover 都是伪类选择器，但它们的核心差异在于触发方式：
| 特性 | :focus | :hover |
|--------------|---------------------------------|---------------------------------|
| 触发方式 | 键盘 Tab 或鼠标点击 | 鼠标悬停 |
| 适用场景 | 可交互元素（表单、按钮、链接） | 任何 HTML 元素 |
| 核心作用 | 提供键盘用户的视觉反馈 | 增强鼠标用户的交互体验 |
类比说明：
:hover是“目光扫过”时的临时状态，类似于路过一家店铺时短暂停留；:focus则是“主动选择”后的专注状态，类似于走进店铺并拿起商品查看。
基础用法：表单元素的聚焦样式
1. 输入框的聚焦效果
最常见的应用是为输入框添加聚焦时的样式，提升用户体验：
/* 去除默认轮廓线 */
input {
outline: none;
}
/* 自定义聚焦样式 */
input:focus {
border: 2px solid #4CAF50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}
效果：当用户点击或 Tab 跳转到输入框时，会显示绿色边框和柔和的阴影，替代浏览器默认的虚线轮廓。
2. 按钮的聚焦反馈
按钮的聚焦样式同样重要，尤其对于依赖键盘导航的用户：
button {
padding: 10px 20px;
background-color: #4A90E2;
color: white;
border: none;
transition: transform 0.2s;
}
button:focus {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(74, 144, 226, 0.7);
}
效果：聚焦时按钮会轻微放大并添加动态阴影，增强交互感。
进阶应用：聚焦状态的扩展与组合
1. 组合伪类选择器
通过与其他选择器结合，可以实现更精准的控制：
/* 当输入框获得焦点时，同时修改父元素的样式 */
.form-group input:focus {
border-color: #2196F3;
}
.form-group input:focus ~ .label {
color: #2196F3;
}
效果：聚焦输入框时，不仅修改输入框本身的边框颜色，还会触发其兄弟元素（如标签）的样式变化。
2. 使用 :focus-within
:focus-within 是一个更高级的伪类，当元素的子元素处于聚焦状态时触发：
.search-container:focus-within {
border: 2px solid #FF5722;
}
.search-container input[type="text"] {
width: 100%;
padding: 8px;
}
效果：当用户聚焦到搜索框时，整个 .search-container 容器的边框会变红，适用于需要“全局反馈”的场景。
可访问性（Accessibility）与 :focus 的重要性
根据 WCAG（Web 内容可访问性指南），所有可交互元素必须提供清晰的聚焦状态，以确保键盘用户的操作流畅性。以下是一些优化建议：
-
避免移除默认
outline：直接设置outline: none可能导致键盘用户无法识别当前聚焦元素。/* 不推荐 */ button:focus { outline: none; /* 移除轮廓线 */ }替代方案：覆盖默认
outline，而非完全移除：button:focus { outline: 2px solid #FF4444; outline-offset: 2px; } -
确保对比度足够：聚焦样式（如边框、背景色）与背景的对比度需符合可读性标准（如 WCAG AA 级要求至少 4.5:1）。
-
动态反馈：通过动画或渐变效果，让用户感知到状态变化：
a:focus { animation: focus-pulse 1s infinite; } @keyframes focus-pulse { 0% { box-shadow: 0 0 0 2px #673ab7; } 50% { box-shadow: 0 0 0 4px #9c27b0; } 100% { box-shadow: 0 0 0 2px #673ab7; } }
常见问题与解决方案
问题 1：聚焦样式被覆盖
当多个 CSS 规则冲突时，可通过提高选择器优先级或使用 !important 解决：
/* 低优先级 */
input:focus {
border-color: red;
}
/* 高优先级 */
.form input:focus {
border-color: blue !important; /* 非推荐，仅作示例 */
}
问题 2：元素无法获得焦点
某些 HTML 元素默认不可聚焦（如 div），需添加 tabindex 属性：
<div class="custom-button" tabindex="0">点击我</div>
配合 CSS：
.custom-button:focus {
border: 2px solid #FF5722;
}
实战案例：可访问性友好的导航菜单
以下是一个完整的导航菜单示例，结合 :focus 和 :hover 实现多设备兼容：
<nav>
<ul class="menu">
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/about">关于我们</a></li>
</ul>
</nav>
.menu li a {
padding: 12px 20px;
color: #333;
text-decoration: none;
}
/* 鼠标悬停效果 */
.menu li a:hover {
background-color: #f8f9fa;
}
/* 聚焦效果 */
.menu li a:focus {
outline: 3px solid #2196F3;
outline-offset: 2px;
background-color: #e3f2fd;
}
效果：鼠标悬停时背景变浅灰，键盘聚焦时显示蓝色轮廓和渐变背景，兼顾不同用户的操作习惯。
结论
CSS :focus 选择器不仅是样式设计的工具，更是提升网页可访问性和用户体验的核心手段。通过理解其基础语法、扩展应用以及可访问性原则，开发者可以构建出既美观又包容的交互界面。无论是为输入框添加视觉反馈，还是为自定义组件实现键盘导航支持，:focus 都能帮助你打造更专业的 Web 产品。
在后续的开发中，建议始终遵循“用户优先”的原则，通过模拟键盘导航（如禁用鼠标操作）测试聚焦状态的可见性，确保每一位用户都能顺畅地与你的网页互动。