本地HTML文件无法加载CSS，但在线编译器可正常运行求助

我之前也碰到过一模一样的情况——本地写的HTML+CSS，直接打开就只有HTML结构，样式完全没加载，但扔在线编辑器里就正常显示。结合你的情况，给你列几个最可能的原因和对应的解决办法：

• 先盯紧文件路径和大小写
  虽然Windows系统文件名不区分大小写，但如果你的CSS文件名是main.css，但HTML里的<link>标签写的是Main.css，有些浏览器或者本地服务器环境（比如用Live Server的时候）会认死理，导致加载失败。仔细核对HTML里href属性的路径：如果CSS和HTML在同一目录，直接写href="style.css"就好，别多写多余的路径（比如./css/style.css但其实文件就在根目录）。

• 强制刷新清缓存
  浏览器有时候会偷懒缓存旧的CSS文件，哪怕你改了内容也不加载新的。按Ctrl+Shift+R（Chrome/Edge）或者Ctrl+F5（IE）强制刷新页面，或者打开开发者工具（F12），在Network面板里勾选「Disable cache」，再刷新试试。

• 检查标签的正确性
  别小看标签的细节，比如有没有把rel="stylesheet"写成rel="style"？或者标签没闭合？正确的写法应该是：

  <link rel="stylesheet" type="text/css" href="你的CSS文件名.css">
  

  HTML5里type属性可以省略，但加上也没坏处，确保没有拼写错误。

• 排查CSS文件的语法和编码
  有时候本地保存CSS文件时，不小心删了个大括号或者分号，导致整个样式表解析失败；或者文件编码不是UTF-8（比如用GBK保存），浏览器解析出错。可以打开CSS文件，检查有没有明显的语法错误，或者用VS Code把编码改成UTF-8重新保存。

• 试试用本地服务器打开
  如果你是直接双击HTML文件用file://协议打开，有些浏览器的安全限制可能会影响CSS加载。试试用VS Code的Live Server插件启动本地服务器，通过http://localhost:xxxx访问你的HTML文件——毕竟在线编辑器也是用服务器环境运行的，这样能排除协议差异的问题。

按这个顺序排查，大概率能找到问题所在！

内容的提问来源于stack exchange，提问作者Jian Quan Ma