动态添加class后样式未生效，主因是CSS选择器未匹配或被覆盖，需检查权重、拼写、大小写、空格、shadow DOM穿透、CSS加载时机及路径404等问题。
动态添加 class 后样式没反应，先查选择器权重和匹配范围
绝大多数情况不是 classList.add() 失败，而是 CSS 样式压根没命中元素。浏览器开发者工具里能看到 class 已加上，但对应样式没生效，大概率是选择器写错了或被更高权重的规则覆盖。
- 打开 DevTools → 选中目标元素 → 看 Styles 面板右侧是否列出你期望的 CSS 规则；如果灰色、带删除线，说明被覆盖
- 检查你写的 CSS 选择器是否真能匹配到该元素：比如写了
.btn-primary.active，但元素实际是<button class="btn active">，漏了primary就不匹配 - 注意层级嵌套关系：如果 JS 添加 class 的元素在 shadow DOM 里（比如 Web Component），外部 CSS 默认无法穿透，得用
:host(.active)或::slotted(.active)
class 名拼写、空格、大小写必须完全一致
CSS 类名区分大小写，且对空格极其敏感。JS 里加错一个字符，CSS 就失效。
-
element.classList.add('Active')和.active { color: red; }不匹配 —— 大小写不一致 -
element.classList.add(' btn-active ')实际会添加两个 class：""（空字符串）和"btn-active "（尾部带空格），都不是有效类名 - 模板字符串拼接时容易出问题：
element.classList.add(`${prefix}-active`)要确认prefix值非空且无非法字符
样式表加载时机早于 JS 执行，或 CSS 文件未加载成功
如果 CSS 是异步加载（比如通过 loadCSS()、import() 动态引入），而 JS 在 CSS 还没解析完就执行了 classList.add()，样式自然不会立刻生效。
- 检查 Network 面板，确认你的 CSS 文件状态码是
200，没有404或blocked - 避免在
<head>里直接执行 JS，除非加defer或放在</body>前；否则 JS 可能操作了尚未渲染的 DOM - 如果是动态插入
<style>标签，要等其sheet.cssRules可读后再操作元素，或用requestAnimationFrame延迟一帧
使用 getComputedStyle 验证样式是否真正应用
光看 class 存在不够，得确认最终计算值是否符合预期。这是最可靠的验证方式。
立即学习“前端免费学习笔记（深入）”；
const el = document.getElementById('my-btn');
el.classList.add('highlight');
// 等一帧，确保样式已重排
requestAnimationFrame(() => {
const computed = getComputedStyle(el);
console.log(computed.backgroundColor); // 看是否为预期值，比如 'blue'
});
- 注意：
getComputedStyle返回的是最终生效值（如rgb(0, 0, 255)），不是原始 CSS 声明值 - 如果返回
''或默认值（如transparent），说明样式根本没挂上，回头重点查选择器和加载顺序 - 不要用
el.style.xxx判断 —— 它只读内联样式，无法反映 class 带来的效果
.container .item.active 但 HTML 结构其实是 <div class="container"><span class="item active">（中间没嵌套）、或者用了 CSS Modules 导致类名被哈希化成 _1a2b3c-active 却还在 JS 里硬写 active。 
