点击后元素保持高亮不能用:active，而应使用:focus（需元素可聚焦）或javascript切换class；:active仅在按下瞬间生效，松开即消失，无法持久。
点击后元素保持高亮用 :active 还是 :focus？
不能用 :active —— 它只在鼠标按下/触摸期间生效，松开就消失，无法“保持”激活状态。真正该用的是 :focus，但前提是元素本身可获得焦点（比如 button、a 带 href、或加了 tabindex 的 div）。:focus 在点击后会保留，直到用户点别的地方或按 Tab 移出。
常见错误：给 div 直接写 :active 并期望它“记住”点击状态，结果一点即逝。
- 按钮类交互优先用
button或带role="button"+tabindex="0"的元素 - 若必须用
div，需手动加tabindex="0"，否则:focus不触发 - 移动端要注意
:focus默认可能不显示（iOS Safari 会隐藏焦点框），需配合outline: none+ 自定义样式
用 JavaScript 控制激活态更可靠
纯 CSS 的 :focus 依赖用户后续失焦行为，不可控。真实项目中，多数需要“点一下变选中，再点一下取消”，或者多选互斥，这时必须用 JS 管理状态。
核心是切换一个 class（如 is-active），然后用 CSS 定义它的样式：
<button class="toggle-btn">切换</button>
<style>
.toggle-btn.is-active {
background-color: #007bff;
color: white;
}
</style><script>
document.querySelector('.toggle-btn').addEventListener('click', function() {
this.classList.toggle('is-active');
});
</script>
- 避免直接操作
style属性，用 class 切换更易维护、支持过渡动画 - 如果要支持键盘操作（空格/回车触发），记得监听
keydown事件并过滤Enter和Space - 注意
button默认有type="submit"，在表单里可能意外提交，建议显式写type="button"
:focus-visible 是什么？什么时候该用？
:focus-visible 是现代浏览器用来区分“键盘聚焦”和“鼠标点击聚焦”的伪类。它只在用户用 Tab 键导航、真正需要可见焦点提示时才生效，而鼠标点击后不会触发 —— 这能避免鼠标用户看到突兀的焦点框。
典型场景：你希望键盘用户有清晰焦点指示，但鼠标用户点击后不显示默认 outline。可以这样写：
.control-btn:focus {
outline: 2px solid #007bff;
}
.control-btn:focus-visible {
outline: 2px solid #007bff;
}
.control-btn:focus:not(:focus-visible) {
outline: none;
}
- 不是所有浏览器都支持
:focus-visible（IE 全不支持，旧版 Safari 需前缀），要用的话得加降级 - 如果项目必须兼容老环境，直接用
:focus+outline: none+ 自定义背景/边框更稳妥 - 别把
:focus-visible当成“点击反馈”的替代方案 —— 它不解决状态保持问题，只优化焦点样式逻辑
移动端点击无反馈？检查这三件事
移动端常出现点了没反应、没高亮、延迟 300ms 才触发的问题，基本都卡在这几个地方：
- 没加
cursor: pointer或touch-action: manipulation，导致 iOS Safari 不识别为可点击区域 - 用了
pointer-events: none或父级遮罩层挡住了事件（比如加载中的半透明 overlay 没设pointer-events: none） - CSS 中写了
-webkit-tap-highlight-color: transparent却忘了配user-select: none，导致文字被误选，干扰点击流
最简验证法：临时加一行 background: red !important; 到点击目标上，看是否真被点中。很多“没反馈”其实是事件根本没绑定到正确元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
