HTML页面无法关联stylesheet 样式不加载问题排查求助

排查前先按F12打开浏览器开发者工具，切换到「控制台」和「网络」面板，刷新页面，优先查看报错信息可以快速定位问题。

1. link标签配置错误 #

• 必须确认rel属性值为stylesheet，拼写错误、漏写该属性都会导致浏览器不识别该资源为样式表，比如误写为style sheet、stylesheets都属于无效配置
• type属性如果显式声明，值必须为text/css，HTML5标准下可以省略该属性，但写错会导致加载失效
• link标签必须放在HTML的<head>标签内部，放置在<body>中可能出现浏览器兼容问题，甚至完全不加载样式
• 正确配置示例：

<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="./style.css">
</head>

2. 文件路径/文件名错误（最高发问题） #

• 相对路径匹配错误：
  • 若HTML与CSS文件同目录，href直接写CSS文件名即可，比如style.css
  • 若CSS在HTML所在目录的子文件夹中，比如CSS放在css文件夹下，href需写为./css/style.css
  • 本地直接打开HTML（地址栏为file://协议）时不要使用以/开头的绝对路径，该路径会从磁盘根目录查找资源，大概率匹配失败
• 文件名大小写不匹配：Windows系统文件名不区分大小写，但Mac、Linux以及线上服务器均严格区分大小写，比如CSS文件名为Style.css时，href写style.css会返回404
• 拼写错误：检查文件名、文件夹名是否有字母拼写错误，比如把style误写为stlye
• 验证方法：网络面板中CSS文件请求状态为404时，100%属于路径或文件名配置错误

3. CSS文件本身语法错误 #

• CSS文件中只能编写纯CSS规则，不允许插入<style>标签或其他HTML代码，否则会导致整个样式文件解析失效
• 存在严重语法错误会导致后续所有样式失效，比如大括号不闭合、属性值漏写分号、注释符不配对等
• 验证方法：网络面板中CSS文件请求状态为200，但元素面板中目标DOM没有匹配到你编写的CSS规则，优先排查CSS语法

4. 浏览器缓存问题 #

• 浏览器会缓存静态资源，修改CSS文件后普通刷新可能加载的是旧版本缓存
• 修复方法：按Ctrl+F5（Windows）/Cmd+Shift+R（Mac）强制刷新跳过缓存，也可以在开发者工具网络面板勾选「禁用缓存」，开着控制台刷新时就不会读取旧缓存

5. 线上服务器配置问题 #

• 若部署到服务器后出现样式失效，控制台报「Resource interpreted as Stylesheet but transferred with MIME type text/plain」错误，说明服务器未给CSS文件配置正确的MIME类型
• 修复方法：修改服务器配置，将.css后缀文件的MIME类型设置为text/css

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