:focus与:active交互效果详解

.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+）

好了，本文到此结束，带大家了解了《:focus与:active交互效果详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！