:active 是 css 伪类，用于设置元素被激活时的样式。它在用户按下按钮或点击链接时生效，常用于实现视觉反馈。通过改变背景色、添加阴影或使用 transform 缩放元素，可模拟真实按压效果。该状态适用于 button、a 标签等可交互元素，并建议与 :hover、:focus 配合使用以形成完整交互链。为避免样式覆盖，应遵循 LVHFA 顺序（:link → :visited → :hover → :active → :focus）。在移动端需注意触摸响应差异，可结合 touch-action 或 javaScript 优化。配合 transition 可使效果更平滑，提升界面响应感和用户体验。
在网页设计中，为了让用户更直观地感知到按钮或链接被点击的状态，可以使用 CSS 的 :active 伪类选择器来设置按下时的样式。这个状态只在元素被鼠标按下（或触摸屏上手指按住）时生效，常用于提升交互体验。
什么是 :active 选择器？
:active 是一个 CSS 伪类，用于匹配用户正在激活的元素。比如点击按钮时从按下到释放之间的瞬间状态。它适用于所有可交互元素，如 button、a 标签、表单控件等。
基本语法与用法
你可以直接在 CSS 中为任意元素添加 :active 状态样式：
button:active { background-color: #005fcc; transform: translateY(1px); box-shadow: none; } a:active { color: red; }上面的例子中，当按钮被按下时背景变深、轻微下移并取消阴影，模拟“按下去”的视觉效果；链接文字则变为红色。
立即学习“前端免费学习笔记（深入）”；
常见应用场景与技巧
- 按钮按下反馈：通过改变背景色、边框、阴影或使用
transform实现压缩或下沉效果，增强可点击感。 - 链接激活状态提示：配合
:hover和:focus使用，形成完整的交互链（悬停 → 聚焦 → 按下）。 - 移动端适配注意：在移动设备上，:active 可能因点击延迟或触摸行为而表现不同，建议结合
touch-action或 javascript 快速响应优化体验。 - 避免样式冲突：确保 :active 在 CSS 规则顺序中位于
:hover之后，防止被覆盖（LVHFA 顺序：:link → :visited → :hover → :active → :focus）。
完整示例：带按压效果的按钮
.btn { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; transition: all 0.1s ease; } .btn:hover { background-color: #0069d9; } .btn:active { background-color: #005fcf; transform: scale(0.98); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }这个例子中，按钮在被点击时会略微缩小并产生内阴影，营造出真实的按压感，同时使用 transition 让变化更平滑。
基本上就这些。合理使用 :active 能显著提升界面的响应性和用户体验，不复杂但容易忽略。