: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 能显著提升界面的响应性和用户体验，不复杂但容易忽略。
