如何在实际CSS加载前设置回退样式并避免加载后样式冲突？

办法1：加载完成后直接删除回退样式块 #

把回退CSS放在带ID的<style>标签里，等外部CSS加载完成后触发事件删除这个标签，彻底清除冲突。

代码示例：

<!-- 回退样式 -->
<style id="temp-fallback">
body { background: #040404; color: #e5e7eb; }
a { margin: 10px; display: inline-block; color: #2E8EFB; }
</style>

<!-- 实际外部CSS -->
<link rel="stylesheet" href="你的真实CSS文件路径.css" onload="document.getElementById('temp-fallback').remove()">

外部CSS加载成功后会触发onload事件，直接移除回退样式块，从根源避免样式冲突。

办法2：用临时类限制回退样式作用范围 #

给<body>添加一个临时类，让回退样式仅对带这个类的元素生效；等外部CSS加载完成后，移除该类即可让回退样式失效。

代码示例：

<body class="css-unloaded">
<!-- 回退样式 -->
<style>
.css-unloaded body { background: #040404; color: #e5e7eb; }
.css-unloaded a { margin: 10px; display: inline-block; color: #2E8EFB; }
</style>

<!-- 实际外部CSS -->
<link rel="stylesheet" href="你的真实CSS文件路径.css" onload="document.body.classList.remove('css-unloaded')">

这种方式灵活性更强，回退样式的作用范围被临时类锁定，移除类后实际CSS的样式就能正常接管页面。

办法3：纯CSS媒体查询技巧（无需JS） #

利用CSS媒体查询的优先级差异，让回退样式仅在未加载外部CSS时生效，加载后自动被覆盖。

先编写回退样式：

<style>
@media all {
  body { background: #040404; color: #e5e7eb; }
  a { margin: 10px; display: inline-block; color: #2E8EFB; }
}
</style>

然后在实际外部CSS中，针对相同选择器使用更具体的媒体查询编写样式：

@media all and (min-width: 0px) {
  body { /* 填写你的实际背景、文字颜色 */ }
  a { /* 填写你的实际链接样式 */ }
}

由于更具体的媒体查询优先级更高，实际CSS加载后会自动覆盖回退样式，全程不需要JS介入。

内容的提问来源于stack exchange，提问作者Luc Gagan