最常用方法是使用 :active 伪类，它在用户按下鼠标左键或触屏按压瞬间生效，松开即恢复；需配合 transition 实现平滑反馈，但不适用于点击后保持状态，后者应使用 javaScript 切换 class。
点击某个元素时样式发生变化，最常用的方法是使用 :active 伪类。它会在用户**按下鼠标左键（或触屏按压）的瞬间**生效，松开后自动恢复原样。
基础用法：给按钮加点击反馈
比如一个普通按钮，希望点击时背景变深、文字上移一点，模拟“按下去”的效果：
button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; transition: all 0.1s ease; /* 让变化更顺滑 */ } <p>button:active { background-color: #0056b3; /<em> 点击时背景变深 </em>/ transform: translateY(2px); /<em> 视觉上轻微下压（实际是文字上移） </em>/ }注意 :active 的触发时机和限制
:active 只在激活状态（active state）期间生效，不是“点击后保持”，而是“按下时”。常见误区：
- 移动端需注意：部分 ios safari 默认禁用
:active，可在加<meta name="viewport" content="width=device-width, user-scalable=no">或给元素加cursor: pointer激活 - 不能配合
:hover链式写成button:hover:active—— 这样写无效；如需 hover 下的点击态，应写成button:hover, button:hover:active或直接用button:hover:active单独定义（但兼容性略低） - 键盘操作（如空格键触发按钮）也支持
:active，无障碍友好
替代方案：需要“点击后保持样式”怎么办？
如果目标是“点一次切换状态”（如开关、选中项），:active 不适用，应改用 javascript 控制 class：
立即学习“前端免费学习笔记（深入）”；
<div class="toggle-btn" onclick="this.classlist.toggle('active')">点我切换</div> <p>.toggle-btn { background: #eee; padding: 8px 16px; }</p><p>.toggle-btn.active { background: #007bff; color: white; }进阶技巧：配合 transition 实现细腻反馈
单独用 :active 容易显得生硬。加上 transition 能让颜色、尺寸、位移等属性平滑过渡：
- 推荐只对变化快的属性加过渡，如
background-color、transform、opacity - 过渡时间建议 ≤ 0.15s，太长会削弱“即时响应”感
- 避免对
height、width做过渡（可能引发重排），优先用transform替代位移类变化