应使用 :active 伪类实现点击瞬间样式变化，1. :active 在按钮被按下时生效，松开即恢复，适合提供视觉反馈；2. 若需持久状态，须用 JavaScript 添加自定义类如 pressed；3. 确保无其他高优先级样式覆盖，可通过开发者工具排查；4. 移动端可能因点击延迟导致 active 失效，可使用 touch-action: manipulation 或 ontouchstart 触发解决。关键在于区分瞬态反馈与持久状态控制。

点击按钮后样式不生效，通常是因为使用了错误的伪类或浏览器默认行为干扰。想要实现点击瞬间的样式变化，应该用 :active 伪类，而不是 :visited 或 :hover。

1. 正确使用 :active 伪类

:active 是 CSS 中用于定义元素被激活（如鼠标按下或触摸点击）时样式的伪类。它只在用户“按下”按钮但尚未释放时生效。

示例：

.my-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

.my-button:active {
  background-color: #0056b3;
  transform: translateY(1px);
}

这样，当用户点击按钮时会看到颜色变深、轻微下压的反馈效果。

2. 注意事件顺序和浏览器默认行为

某些情况下，点击后样式“闪一下就消失”是正常的，因为 :active 只在按下时存在。如果你希望点击后保持某种状态，应结合 JavaScript 使用一个自定义类。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

立即学习“前端免费学习笔记（深入）”；

例如用 JS 添加“pressed”类：

document.querySelector('.my-button').addEventListener('click', function() {
  this.classList.add('pressed');
});

CSS 配合：

.my-button.pressed {
  background-color: #28a745;
}

3. 确保没有其他样式覆盖

检查是否有其他 CSS 规则优先级更高，覆盖了 :active 的样式。比如 :focus 或内联样式可能干扰显示。

解决方法：

• 使用开发者工具检查元素实际应用的样式
• 提高选择器权重，如写成 button:active 而不是仅 :active
• 避免使用 !important，除非必要

4. 移动端点击延迟与 active 失效问题

在移动端，由于点击事件有 300ms 延迟或 fastclick 类库的影响，:active 可能无法立即触发。

解决方案：

• 添加 touch-action: manipulation 提升响应速度
• 使用 ontouchstart 触发空回调来激活 active 状态：
  <button ontouchstart="">

基本上就这些。关键是理解 :active 是瞬态样式，适合做点击反馈，而不是持久状态。需要持久变化时，交给 JavaScript 控制类名更可靠。