动态添加元素后样式不生效，主因是元素未插入DOM、类名拼写错误、CSS优先级不足或作用域隔离；应确保先挂载元素再加类、严格匹配类名、避免内联样式干扰，并用开发者工具验证样式命中情况。
动态添加元素后样式不生效，通常不是 CSS 写错了，而是元素插入 DOM 的时机、类名拼写、CSS 优先级或样式作用域出了问题。用 class 选择器 + JS 添加类名 是最稳妥的方式，关键在于“加对类”和“确保样式能命中”。
确认元素已正确插入 DOM
JS 创建的元素（如 document.createElement）默认不在文档中，必须显式挂载（如 parent.appendChild(el)）后，CSS 类才能起作用。
- ❌ 错误：只创建了元素，没 append 到页面
- ✅ 正确：先
el.classList.add('my-btn')，再container.appendChild(el)；或反过来也行（只要插入前/后加类都可，但必须在渲染前完成）
检查 class 名是否拼写一致
大小写、空格、连字符必须完全匹配。HTML 中 class 是字符串，JS 中写错一个字母就找不到规则。
- CSS 里写的是
.btn-primary，JS 就得写el.classList.add('btn-primary') - 避免使用驼峰命名（如
myButton），CSS 类推荐用短横线分隔（my-button） - 可用浏览器开发者工具 → Elements 面板，右键新元素 → “Edit as HTML”，确认 class 属性是否存在且正确
留意 CSS 作用域与优先级
样式被覆盖或未生效，大概率是选择器权重不够，或被 scoped / Shadow DOM / CSS-in-JS 隔离了。
立即学习“前端免费学习笔记（深入）”；
- 如果用了 Vue 的
<style scoped>或 React 的 CSS Modules，动态添加的元素不会自动获得 scoped 类，需手动加上生成的哈希类，或改用全局样式 - 检查 DevTools 的 Styles 面板：目标元素上是否有该 class？对应样式是否被划掉（表示被更高优先级规则覆盖）？
- 临时提高优先级可加
!important排查（上线前应移除），或用更具体的选择器，比如.container .my-element
避免内联样式干扰
JS 直接设置 el.style.xxx 会生成内联样式，它优先级高于 class，可能盖掉你的 CSS 规则。
- ❌
el.style.color = 'red'后又加el.classList.add('text-blue')，颜色仍为 red - ✅ 改用纯 class 控制样式：删掉所有
el.style.xxx，全部交由 CSS 类管理 - 必要时可用
el.style.cssText = ''清空内联样式再加类
