:active伪类可实现点击时的原生样式反馈，需设置cursor:pointer、viewport meta及touch-action:manipulation确保移动端生效；其声明须置于:hover/:focus之后，并配合transform、box-shadow等增强按压感，但无法通过JS触发且disabled时失效。
用 :active 伪类可以实现元素被点击（鼠标按下、触摸开始）时的短暂样式变化，这是最标准、无需 JavaScript 的方案。
确保 :active 样式能正常触发
在移动端，部分浏览器默认会延迟或禁用 :active，需添加以下基础设置：
- 给目标元素（如按钮、链接）设置
cursor: pointer（PC端更易识别可点击） - 在
中添加 - 部分安卓浏览器要求元素有
ontouchstart="void(0)"（现代项目中更推荐用touch-action: manipulation）
写法要点：注意层级与覆盖顺序
:active 必须放在 :hover 和 :focus 之后，否则可能被覆盖：
button {
background: #007bff;
}
button:hover {
background: #0056b3;
}
button:focus {
outline: 2px solid #007bff;
}
button:active {
background: #004080; /* 点击时更深色 */
transform: scale(0.98); /* 可选：轻微缩放增强反馈 */
}提升点击反馈的真实感
单纯变色不够明显，建议组合使用：
立即学习“前端免费学习笔记（深入）”；
- 添加
transition让进入/退出更平滑（但:active本身是瞬时态，过渡主要影响 hover → active 或 active → normal 的衔接） - 用
transform: translateY(1px)模拟“按下去”的凹陷感 - 配合
box-shadow: inset做内阴影强化按下效果
兼容性与注意事项
:active 在所有现代浏览器中都支持，但要注意：
- 只在用户主动触发（鼠标左键按下、触摸开始）时生效，松开即恢复
- 无法通过 JS 主动触发（不支持
element.classList.add('active')这类模拟） - 若元素被禁用（
disabled），:active不会生效 - 在表单控件（如
）上同样可用，但部分浏览器对原生控件样式限制较多，建议用替代
