CSS样式不生效首要排查CSS文件是否成功加载：检查link路径是否正确、Network面板中状态码是否为200、Content-Type是否为text/css，再确认rel="stylesheet"、media属性匹配、标签位于head内且无disabled。
link 插入后样式没更新，先看 CSS 文件是否真加载成功
动态创建 <link> 后样式不生效，第一反应不该是“JS 写错了”，而是确认浏览器到底有没有把 CSS 文件拉下来。很多情况下，href 路径写错、路径相对于当前 JS 执行位置而非 HTML、或构建工具重写了资源路径，都会导致 404。
打开 Chrome DevTools → Network 面板，过滤 css，刷新页面，找你动态插入的那条请求：状态码不是 200？Size 显示 failed 或 0 B？那就直接卡在这一步了。
- 用绝对路径或根相对路径（如
/assets/theme.css）比./theme.css更可靠 - 如果在打包环境（Vite/webpack）中运行，检查构建产物里该 CSS 文件是否存在，路径是否被 hash 重命名
- 插入后可加个简单验证：
link.onload = () => console.log('CSS loaded');，但注意它不保证规则已解析完成
样式规则存在，但没应用到动态组件上
CSS 文件加载成功 ≠ 样式自动作用于所有元素。浏览器只对当前已存在的 DOM 节点做一次匹配；后续插入的节点，只要选择器能命中，样式依然生效——前提是选择器本身没写错、没被隔离。
常见漏点：
立即学习“前端免费学习笔记（深入）”；
- 动态组件的 class 名拼写和大小写是否与 CSS 选择器完全一致？
.btn-primary和.Btn-Primary是两个类 - 用了
scoped（Vue SFC）、Shadow DOM或 CSS-in-JS（如 emotion）？外部<link>的全局样式默认无法穿透进去 - 目标元素是否在
<head>插入<link>时还不存在？不是问题——只要它之后被插入，且选择器匹配，样式就会生效
规则加载了，但被更高优先级样式覆盖
这是最隐蔽也最常见的原因：你看到 CSS 文件加载了、选择器也匹配了、元素上也确实有那个 class，但右键审查元素，发现对应样式被划掉（灰色删除线）。
说明有别的规则赢了优先级计算。比如：
- 框架自带样式（Bootstrap/Tailwind）在你插入的
<link>之前就已加载，而你的选择器只是.card，它的权重输给.bootstrap-card .card - 内联样式（
style="color: red"）或 JS 直接写的el.style.color，优先级高于任何 class 规则 - 用了
!important的第三方规则，而你没加，自然被压
解决方法不是堆 !important，而是让选择器更具体：把 .modal 改成 body .modal 或 .app-root .modal，通常就能翻盘。
插入顺序和 DOM 就绪时机影响真实效果
动态插入 <link> 的时机，会影响它在样式表层叠顺序中的位置。浏览器按 <link> 在 <head> 中的出现顺序决定覆盖逻辑——后插入的，同选择器下会覆盖前面的。
但要注意：
- 如果你插入的
<link>在框架 CSS 之后，又没提高选择器权重，大概率被盖住 -
document.head.appendChild(link)是同步操作，但 CSS 解析和样式重计算是异步的；极少数情况下（比如立即调用getComputedStyle），可能取到旧值，建议用requestAnimationFrame延迟读取 - 不要依赖 “插入后立刻生效” 的直觉；用 DevTools 的 Elements 面板手动选中目标元素，看 Styles 标签页里你的规则是否出现在列表中、是否被划掉、是否显示为灰色（来自用户代理或未激活）
真正卡住的地方，往往不是“怎么插”，而是“插完之后谁说了算”——浏览器渲染引擎只认三件事：规则是否存在、是否匹配、是否够强。其他都是干扰项。
