合理使用:hover、:active和:focus可提升交互体验：悬停变色、点击加深、聚焦加框，需遵循LVHA顺序并兼顾无障碍与移动端兼容性。
在网页交互设计中，CSS 的伪类配合选择器能有效增强用户体验。合理使用 :hover、:active 和 :focus 可以让按钮、链接等元素具备清晰的状态反馈。下面通过实际场景说明如何组合使用这些伪类。
基本概念与作用
这三个伪类分别对应用户操作的不同阶段：
- :hover —— 鼠标悬停在元素上时触发
- :active —— 元素被鼠标点击但尚未释放时生效
- :focus —— 元素获得焦点（如通过 Tab 键或点击输入框）时应用
它们可以单独使用，也可以与类选择器、属性选择器等组合，实现更精确的样式控制。
常见应用场景示例
以下是一些典型用法，展示如何结合选择器提升交互效果。
立即学习“前端免费学习笔记（深入）”；
1. 按钮状态样式区分
.btn {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #0056b3;
}
.btn:active {
background-color: #004085;
}
.btn:focus {
outline: 2px solid #0056b3;
outline-offset: 2px;
}
这样用户能清楚感知按钮的当前状态：悬停变深色，点击时更暗，聚焦时有外框提示。
2. 输入框聚焦样式优化
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
outline: none;
}
当用户进入输入框时，边框高亮并添加轻微阴影，提升可访问性。
3. 导航链接的复合状态处理
.nav-link {
text-decoration: none;
color: #333;
padding: 8px 12px;
}
.nav-link:hover {
color: #007bff;
text-decoration: underline;
}
.nav-link:active {
color: #004085;
}
导航项在悬停时变色加下划线，点击瞬间颜色更深，提供视觉反馈。
注意事项与最佳实践
为了确保样式逻辑正确且用户体验一致，请注意以下几点：
- 伪类顺序建议遵循 LVHA 原则：:link → :visited → :hover → :active，避免样式覆盖问题
- 尽量避免仅用颜色变化表示状态，应结合边框、背景、阴影等多种方式，照顾色盲用户
- :focus 样式不可省略，否则影响键盘导航的可用性，违反无障碍标准
- 移动端需注意 :hover 的兼容性，某些设备可能不触发或延迟响应
基本上就这些。掌握伪类与选择器的组合技巧，能让界面更具响应性和专业感，关键在于细致测试不同状态下的表现。不复杂但容易忽略细节。
