CSS 中 :hover 和 :active 无法通过纯样式规则（如 :not(:active)）实现互不干扰的叠加动画，因为 :active 是瞬态伪类，释放鼠标后立即失效，且其样式优先级和生命周期会覆盖或中断 :hover 动画。必须借助 JavaScript 维持点击后的状态。
css 中 `:hover` 和 `:active` 无法通过纯样式规则（如 `:not(:active)`）实现互不干扰的叠加动画，因为 `:active` 是瞬态伪类，释放鼠标后立即失效，且其样式优先级和生命周期会覆盖或中断 `:hover` 动画。必须借助 javascript 维持点击后的状态。
在实际开发中，我们常希望一个元素既能在悬停时平滑动画（如旋转），又能在父按钮被点击后保持某种视觉状态（例如完成一次旋转并停留）。但直接使用 .box:not(:active) .el 这类写法存在根本性误解：:not(:active) 并非“取消 :active 影响”，而是仅在 .box 未处于激活态时才应用该规则；而一旦触发 :active，.box:not(:active) .el 规则即失效，此时若无其他匹配样式，.el 将回退到默认状态——这会导致 :hover 动画被意外中断，甚至完全不可见。
更关键的是：:active 伪类仅在用户按下鼠标（或触摸）的极短时间内生效（通常 :hover 共存或接力。
✅ 正确解法：用 JavaScript 切换自定义类名，分离「交互触发」与「状态维持」逻辑：
<div class="box" id="triggerBtn"> <span class="el">?</span> </div>
.box {
display: flex;
justify-content: center;
width: 100vw;
height: fit-content;
background-color: wheat;
cursor: pointer;
}
.el {
width: fit-content;
font-size: 100px;
border: solid thin pink;
transition: transform 1s ease;
}
/* 悬停动画：独立、可中断、可重入 */
.el:hover {
transform: rotate(360deg);
}
/* 点击后保持的动画状态：由 JS 添加的类控制 */
.el.clicked {
transform: rotate(360deg);
}
/* 可选：避免悬停与点击状态冲突时的突兀跳变 */
.el.clicked:hover {
transform: rotate(720deg); /* 或保持原值，视设计需求而定 */
}const triggerBtn = document.getElementById('triggerBtn');
const el = document.querySelector('.el');
triggerBtn.addEventListener('click', () => {
el.classList.add('clicked');
});
// 可选：支持再次点击取消状态
// triggerBtn.addEventListener('click', () => {
// el.classList.toggle('clicked');
// });⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
:active实现持久视觉反馈，它是为“按下瞬间”设计的，不是状态管理工具； - 若需兼容键盘操作（如空格/回车触发），应监听
keydown并过滤可访问性事件； - 在移动端，
:active行为不稳定（尤其 Safari），JS 方案更具跨平台一致性； - 如需动画链式执行（如点击 → 旋转 → 缩放），建议使用
@keyframes+animation配合animation-fill-mode: forwards，再由 JS 控制animation-play-state或切换动画类。
总结：CSS 伪类有明确的语义与生命周期边界。将「瞬时交互」（:active, :hover）与「持久状态」（.clicked, .is-rotated）解耦，是构建可靠交互动画的基础原则。
