浏览器拒载css的根本原因是服务器未返回content-type: text/css响应头，而非html中type属性或css文件错误；file://协议无http头导致本地双击打开必然失效，必须用本地服务器并验证network面板中css请求的content-type值。
浏览器拒绝加载CSS，根本不是文件写错了，而是服务器没把.css文件当成text/css发出去——它只看Content-Type响应头，不看你HTML里写了type="text/css"。
为什么type="text/css"根本没用
这个属性只是文档提示，浏览器压根不靠它判断资源类型。真正起作用的是HTTP响应头里的Content-Type字段。如果服务器返回text/plain、text/html甚至空值，哪怕CSS内容完全正确，Chrome 90+、Firefox、Edge都会直接拒收，并在Network面板里显示“Type: document”或“Type: txt”。更麻烦的是：X-Content-Type-Options: nosniff一旦启用，容错率为零，连嗅探补救的机会都没有。
本地开发时最常踩的坑：别双击打开HTML
用file://协议打开页面，浏览器没有HTTP头可依赖，Windows可能把.css映射成text/plain，Mac/Linux也一样不可靠。这不是你代码的问题，是协议本身就不支持MIME协商。
- 立刻停用双击打开方式，改用
python -m http.server 8000或http-server - 如果必须查注册表（仅IE/旧Win），运行
regedit→ 定位HKEY_CLASSES_ROOT\.css→ 确认Content Type值为text/css - 别信“加个
type就行”的说法——它解决不了file://下无响应头的本质问题
Nginx/Apache/Express里怎么配才生效
配置错一个字符，text/css就变application/octet-stream。关键不在“加”，而在“准”和“早”。
- Nginx：确认
http块里有include mime.types;，且/etc/nginx/mime.types中存在text/css css;（注意分号）；临时验证可用location ~ \.css$ { add_header Content-Type text/css; }，但上线前应修复mime.types - Apache：确保
mime_module已启用，.htaccess或httpd.conf中写AddType text/css .css，避免被ForceType覆盖 - Express：把
express.static('public')作为第一个中间件注册；若用了setHeaders选项，必须显式判断path.endsWith('.css')并设res.setHeader('Content-Type', 'text/css')
真正要盯住的地方只有一个
打开浏览器开发者工具 → Network → 找到那个CSS请求 → 点开Headers → 拉到底看Response Headers里的Content-Type。路径拼写对、文件真实存在、link标签写得再标准，只要这里不是text/css，样式就永远不会生效。最容易被忽略的是：返回200不代表成功，它可能正悄悄给你发一个404 HTML页面——此时Content-Type是text/html，而你还在检查CSS语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
