动态元素CSS失效时，如何用事件委托或类更新重置选择器？

本文共计829个文字，预计阅读时间需要4分钟。

页面加载后使用 `document.createElement` 或框架（如 React、Vue）插入的新节点，发现 `.btn-primary` 样式未生效，或 `:hover`、`:focus` 等伪类不触发。这不是选择器写错，而是元素插入时未被 CSS 引擎识别的问题——实际上是渲染时机或匹配机制的问题。

检查 class 是否真正应用到动态元素上

很多情况根本不是选择器失效，而是 class 没加对。尤其在拼接 HTML 字符串或使用 innerHTML 时容易漏掉空格或写错大小写。

• 用浏览器开发者工具选中元素，看 Elements 面板里 class 属性是否真实存在，且拼写与 CSS 中一致（区分大小写）
• 避免用 element.setAttribute('class', 'btn active') 覆盖已有 class；改用 element.classList.add('active')
• 框架中注意响应式 class 绑定语法，比如 Vue 的 :class="{ active: isActive }" 必须确保 isActive 是响应式数据

伪类（:hover/:focus/:checked）在动态元素中不生效的原因

:hover 和 :focus 不是“失效”，而是依赖用户交互状态和元素是否可交互。动态生成的 <button> 如果没设置 tabindex 或被 pointer-events: none 阻断，就无法触发。