:active 只在鼠标按下或触摸开始到松开的瞬时生效，不能实现导航点击后高亮；应使用 class="active" 配合 js 或服务端控制，:active 仅适用于按钮压感等瞬时反馈。
为什么 :active 在导航上点一下就没了
因为 :active 只在鼠标按下（或触摸开始）到松开的极短时间内生效，不是“点击后保持”，更不是“当前页高亮”——这是最常见的误解。浏览器原生行为里，它只响应瞬时交互状态，松手即失效。
常见错误现象：:active 样式写了但完全没反应；或者在移动端点一下闪一下就恢复，根本留不住。
- 真正在用的场景是：按钮按下的压感反馈、临时视觉确认，不是导航选中态
- 如果你想要“点完停留在当前页”的效果，该用
class="active"配合 JS 或服务端模板控制，而不是依赖:active - 部分安卓 WebView 或旧版 iOS Safari 对
:active支持不一致，甚至默认禁用（需加cursor: pointer或touch-action: manipulation才触发）
:active 在 <a></a> 上不起作用？检查这些
导航项通常是 <a></a> 标签，而它的 :active 行为受链接是否可跳转影响。如果 href 是 # 或空字符串，某些浏览器会跳过激活态。
- 确保
href是有效值，比如href="/home"或至少href="#"+onclick="return false" - 移动端必须给
<a></a>加cursor: pointer（iOS Safari 要求），否则不触发:active - 不要在父容器上写
:active期望影响子元素——伪类不继承，得直接写在可交互元素上
示例（有效）：
立即学习“前端免费学习笔记（深入）”；
a.nav-link:active {
background-color: #007bff;
transform: scale(0.98);
}
想让点击有“按住停留感”？用 JavaScript 补一手
纯 CSS 的 :active 天然做不到“松手后还保持”，但你可以用 JS 模拟一次短时态：监听 mousedown / touchstart，加临时 class，再用 setTimeout 清掉。
- 别用
click事件——它在松手后才触发，无法模拟按下态 - 要兼容触摸和鼠标，得同时监听
touchstart和mousedown，并用preventDefault()防止双触发 - 延迟时间建议设为 150–200ms，太短感知不到，太长像卡顿
简短示意：
el.addEventListener('mousedown', () => {
el.classList.add('is-pressed');
setTimeout(() => el.classList.remove('is-pressed'), 180);
});
对应 CSS：
a.is-pressed { background-color: #0056b3; }
真正该用 :active 的地方其实很窄
它只适合做「瞬时反馈」，比如按钮下压、卡片轻触缩放、开关滑动前的预备态。一旦涉及状态持久化（如导航高亮、菜单展开、表单验证结果），就得换思路——CSS 里用 .active / [aria-current="page"]，JS 里管理 class 切换，或交由框架（React/Vue）的条件渲染处理。
容易被忽略的一点：过度依赖 :active 做交互暗示，反而会让用户困惑——因为它的持续时间不由你控制，且在无障碍场景下无意义。真正的“停留感”，从来不是靠伪类撑起来的。
