:focus作用于具体元素，:focus-within响应容器内子元素焦点状态，二者结合可实现表单区域高亮与层级化视觉反馈，提升可访问性与用户体验。
在现代网页开发中，提升表单输入的可访问性和用户体验非常重要。CSS 的 :focus 和 :focus-within 伪类能帮助我们更智能地控制焦点状态样式，尤其适用于容器级交互反馈。合理组合使用这两个伪类，可以让用户清楚知道当前正在操作哪个输入区域，从而优化整体输入体验。
理解 :focus 与 :focus-within 的区别
:focus 作用于当前获得焦点的具体元素，比如 input、button 等。当用户点击或用键盘 tab 到某个输入框时，该元素触发 :focus 样式。
:focus-within 则应用于一个父容器，只要其内部任意子元素获得焦点，该容器就会激活此伪类。这意味着即使样式写在包裹 div 上，也能响应内部 input 的聚焦行为。
例如：
立即学习“前端免费学习笔记（深入）”；
-
input:focus—— 只对 input 本身添加边框或阴影 -
.form-group:focus-within—— 当 group 内的 input 获得焦点时，高亮整个表单项区域
实际应用场景：表单组高亮
在复杂表单中，让用户明确知道当前操作的是哪一项非常关键。通过 :focus-within 可以实现“输入即高亮区域”的效果。
.form-group {
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
transition: all 0.2s ease;
}
.form-group:focus-within {
background-color: #f9f9ff;
border-color: #4c9aff;
box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.2);
}这样，当用户点击或 tab 进入该组内的 label、input 或辅助按钮时，整个 .form-group 都会呈现视觉反馈，增强操作感知。
结合 :focus 实现层级化样式
可以同时使用两者，让焦点反馈更有层次。例如：外层容器轻微变色，内层输入框有明显边框变化。
.form-field {
margin-bottom: 16px;
}
.form-field:focus-within {
transform: scale(1.02);
z-index: 1;
}
input {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
outline: none;
transition: border 0.2s;
}
input:focus {
border-color: #007acc;
}这种设计既保持了整体结构的稳定感，又突出了具体操作点，适合登录页、注册表单等场景。
提升可访问性的小技巧
确保键盘导航用户也能获得清晰反馈。避免仅依赖颜色变化，应结合边框、阴影或轻微位移来表达状态。
- 始终保留
outline或提供替代样式（如使用 box-shadow 模拟） - 使用
transition让样式变化平滑，减少视觉干扰 - 对于嵌套结构（如带图标的输入框），:focus-within 尤其有用，能统一处理复合组件的焦点表现
基本上就这些。利用 :focus 控制具体元素，用 :focus-within 管理容器状态，两者配合能让输入交互更直观、更友好。不复杂但容易忽略细节，值得在每个表单项目中实践。
