css样式中focus有什么用

# CSS样式中focus有什么用 ## 一、什么是:focus伪类 `:focus`是CSS中的一个**伪类选择器**，用于匹配当前获得焦点的表单元素或可交互元素。当用户通过鼠标点击、键盘Tab键导航等方式激活某个元素时，该元素即处于`focus`状态。 ```css input:focus { border-color: blue; box-shadow: 0 0 5px rgba(81, 203, 238, 1); } 

二、核心作用与使用场景

1. 提升表单可用性

• 视觉反馈：为输入框、选择框等表单元素添加聚焦样式，帮助用户明确当前操作位置
• 键盘导航支持：使键盘用户在Tab切换时能清晰识别焦点位置

2. 无障碍访问(A11Y)必备

符合WCAG 2.1标准，确保： - 焦点可见性（2.4.7） - 键盘可操作性（2.1.1）

3. 现代UI交互设计

• 微交互效果（如动画过渡）
• 浮动标签样式变化
• 动态提示显示

三、实际应用示例

基础表单增强

/* 输入框聚焦样式 */ input:focus, textarea:focus { outline: 2px solid #4CAF50; background-color: #f8f8f8; } /* 按钮聚焦样式 */ button:focus { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(0,123,255,.25); } 

高级交互效果

/* 浮动标签效果 */ .input-group:focus-within label { transform: translateY(-120%) scale(0.9); color: #0066cc; } /* 平滑过渡动画 */ input:focus { transition: all 0.3s ease-out; } 

四、注意事项与最佳实践

1. 不要移除outline

错误做法：

/* 禁用默认焦点轮廓（违反无障碍原则） */ :focus { outline: none; } 

正确替代方案：

:focus { outline: 2px solid currentColor; outline-offset: 2px; } 

2. 组合使用伪类

/* 不同状态组合 */ button:hover:focus { background-color: darken(primary-color, 15%); } /* 验证状态 */ input:focus:invalid { border-color: #ff4444; } 

3. 现代CSS扩展

• :focus-visible：区分鼠标和键盘焦点
• :focus-within：父容器焦点状态

/* 仅对键盘操作显示焦点样式 */ button:focus-visible { outline: 3px dashed #000; } 

五、浏览器兼容性

伪类	Chrome	Firefox	Safari	Edge
:focus	1.0+	1.0+	1.0+	12+
:focus-visible	86+	85+	15.4+	86+
:focus-within	60+	52+	10.1+	79+

六、总结

:focus伪类是构建可访问、用户友好界面的关键工具。合理使用可以： 1. 显著提升表单操作体验 2. 满足无障碍设计要求 3. 创建精致的交互效果 4. 适配多种输入方式（鼠标/键盘/触摸）

开发时应始终遵循”焦点可见”原则，结合现代CSS选择器创建更智能的焦点管理方案。 “`

注：本文约750字，采用Markdown格式编写，包含代码示例、兼容性表格等技术内容，符合技术文档规范。可根据需要调整具体示例或补充更多使用场景。