为何仅在<html>标签前加载JS函数时CSS才生效？

核心逻辑：脚本执行时机与CSS解析顺序的冲突 #

1. 放在<html>标签前的特殊情况

这种写法不符合HTML规范，但浏览器会做容错处理——它会把这段脚本的执行时间推迟到DOM树完全构建、CSS文件也解析完成之后（相当于等DOMContentLoaded事件触发后再执行）。这时候生成的按钮插入DOM时，ctb.css的样式规则已经完全生效，浏览器能直接给按钮应用对应样式，所以表现正常。

2. 放在<head>内部时的问题

如果脚本没有加defer或async属性，会同步执行，这时候浏览器还在解析<head>：

• 要是ctb.css是在这个脚本之后引入的，脚本执行时CSS还没开始解析，生成的按钮先插入了DOM，但后续CSS解析完后，部分浏览器不会自动给已插入的动态元素重新计算样式；
• 就算ctb.css在脚本之前引入，同步执行的JS会阻塞HTML解析和CSS渲染，按钮插入DOM时，CSS的样式规则还没完全准备好，导致样式无法立即生效。而页面里的静态元素会在后续渲染树更新时被重新处理，所以它们的样式正常。

3. 放在</body>标签前时的问题

此时DOM树已经构建完，但如果ctb.css的加载/解析被延迟（比如网络慢、文件大），或者脚本执行时CSS的样式规则还没完全生效，动态生成的按钮插入DOM后，浏览器没触发这个元素的样式重计算。而静态元素是在DOM构建过程中逐步处理的，CSS生效后会自动更新它们的样式，所以只有按钮样式失效。

快速验证方法 #

• 打开浏览器开发者工具的Elements面板，检查动态按钮的类名是否和ctb.css里的选择器匹配；
• 查看Styles面板，确认ctb.css的按钮样式是否被划掉（如果是，说明有更高优先级的样式覆盖，否则就是样式没被应用）。

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