:focus仅对可聚焦元素生效，需为div等添加tabindex="0"；:active仅在鼠标按下瞬间触发，iOS上非可点击元素可能不支持。
focus 伪类只对可聚焦元素生效
不是所有元素加了 :focus 就能响应点击或 Tab 键。浏览器默认只给 <input>、<button>、<a href>、<textarea> 等原生可交互元素赋予焦点能力。对 <div> 或 <span> 直接写 div:focus { outline: 2px solid blue; } 是无效的。
如果真要让非表单元素响应 :focus，必须显式添加 tabindex 属性：
<div tabindex="0">点我获得焦点</div>
注意：tabindex="0" 表示该元素可被键盘聚焦（按 Tab 进入），但不改变文档顺序；tabindex="-1" 则只能用 JavaScript 主动调用 .focus()，不能通过 Tab 进入。
- 避免滥用
tabindex="1"及正数——会打乱默认 tab 顺序，损害可访问性 -
:focus样式在键盘聚焦和鼠标点击后都会触发，但某些旧版 Safari 对鼠标点击触发:focus支持不稳定 - 若同时设置
:focus和:active，点击瞬间先触发:active，松开后才进入:focus（前提是元素仍保持可聚焦）
:active 伪类的触发时机很短且依赖鼠标状态
:active 只在用户「按下鼠标左键」到「松开之间」这一帧内生效，且仅作用于当前被按下的元素。它不关心焦点，也不需要 tabindex，但对触摸设备支持有限：iOS Safari 在非可点击元素上可能完全不触发 :active。
立即学习“前端免费学习笔记（深入）”；
常见误判是以为 :active 能替代按钮按下态（pressed state）。实际上它无法持久化，也不能通过 JS 模拟（没有 API 能手动激活 :active）。
- 移动端需额外加
cursor: pointer或touch-action: manipulation才可能激活:active - 如果父容器设置了
pointer-events: none，子元素的:active会被拦截 -
:active的样式优先级低于:focus和内联 style，调试时容易被覆盖
动态内容中 :focus/:active 失效的典型原因
用 JavaScript 动态插入的元素（比如 innerHTML 或 appendChild）不会自动继承原有事件绑定，但伪类本身不依赖 JS 绑定——失效通常是因为插入后元素未满足可聚焦条件，或 CSS 选择器作用域出错。
例如，用 Vue/React 渲染一个 <button class="btn">，但 CSS 写成：
.btn:focus { background: #007bff; }
这本身没问题；但如果组件里用了 scoped（Vue）或 CSS Modules，实际生成的选择器可能是 .btn[data-v-f3f3eg9]::focus，而动态插入的 DOM 若没带上对应属性，样式就丢了。
- 检查 DevTools 中元素是否真的匹配了目标选择器（看 Styles 面板有没有被划掉）
- 动态创建的
<input>如果没设type，部分浏览器会降级为不可聚焦的普通元素 - 使用
contenteditable="true"的元素虽可聚焦，但:active在其上行为不一致，慎用
与 JavaScript 状态配合更可控
纯 CSS 的 :focus 和 :active 适合简单反馈，但复杂交互（比如“按下后保持高亮直到下一次点击”）必须靠 JS 控制类名。例如实现开关按钮：
<button id="toggle">关闭</button>
#toggle.is-active { background: #28a745; }
#toggle:active { transform: scale(0.98); }
然后用 JS 切换 is-active：
const btn = document.getElementById('toggle');
btn.addEventListener('click', () => {
btn.classList.toggle('is-active');
btn.textContent = btn.classList.contains('is-active') ? '开启' : '关闭';
});
这样既保留 :active 的瞬时压感，又用类名控制持久状态。
- 不要用
focus()强行聚焦无语义元素——屏幕阅读器会朗读，但用户不知道为何跳转 - 如果业务要求键盘操作后也触发类似
:active的视觉反馈，得监听keydown+keyup并手动切类 -
:focus-visible正在逐步替代:focus做键盘专属聚焦样式，但兼容性仍需留意（Firefox 85+、Chrome 86+）
:active 在 iOS 上的静默失效，以及 :focus 对非表单元素的零容忍——这两点一旦漏测，移动端交互就会显得“没反应”。 
