rel="stylesheet"拼写错误是最隐蔽高频问题，浏览器严格匹配该值，错写为sytlesheet等会导致标签被忽略、不发请求；需用DevTools Elements和Network面板验证拼写与200状态，并检查路径、Content-Type、选择器匹配及作用域隔离。
rel="stylesheet" 拼写错了
这是最隐蔽也最高频的问题：浏览器对 rel 属性值严格匹配，只认 stylesheet（两个 t，没有 y）。写成 sytlesheet、styleSheet、css 或漏掉 rel，浏览器会直接忽略该 <link> 标签——不发请求、不报错、样式全失效。
验证方法很简单：
- 打开 DevTools → Elements 面板，检查
<head>里的<link>标签，确认rel值是否为stylesheet - 切到 Network 面板，筛选
css，刷新页面——如果目标 CSS 文件压根没出现在列表里，基本就是这个原因 - VS Code 等编辑器输入
<link rel=""会自动补全，善用这个提示能避免手误
CSS 文件根本没加载成功
Network 面板里看到 CSS 请求状态不是 200，就说明文件没拿到。常见情况包括：
-
404：路径写错，比如 HTML 在/pages/index.html，却写href="css/style.css"，浏览器实际请求的是/pages/css/style.css；改用href="/css/style.css"（根路径）或href="./css/style.css"（显式相对路径） -
403：服务器权限拒绝，Nginx/Apache 未开放目录读取 - 状态码为
0或显示blocked：可能是混合内容（HTTP 页面加载 HTTPS 资源）、CSP 策略拦截，或广告屏蔽插件主动封禁 - 响应头
Content-Type不是text/css：比如本地用python -m http.server启服务，默认返回text/plain，现代浏览器直接拒解析；可换live-server或配置 Nginx 的types块
CSS 加载了但样式没应用
Network 显示 200，但页面还是没样式，说明问题出在“应用层”：
立即学习“前端免费学习笔记（深入）”；
- 右键目标元素 → “检查”，在 Elements 面板看右侧 Styles 面板：被划掉（strikethrough）的规则，说明被更高优先级样式覆盖；点文件名能跳转到具体行
- 选择器没匹配上：大小写敏感（
.Card≠.card），空格语义不同（.container .btn是后代，.container.btn是同时含两个类），JS 动态插入的节点需确保 class 名和 DOM 结构与 CSS 规则一致 -
<link>放在<script>后面，而脚本立即修改了 class 或内联样式，导致 CSS 来不及生效；应把<link>放在<head>中<title>之后、关键 JS 之前 - Shadow DOM 或
<iframe>内部，普通选择器无效，需用::slotted()或:host等作用域限定语法
本地双击打开 HTML 时 CSS 失效
用 file:// 协议直接打开 HTML 文件，Chrome/Edge 默认禁止加载外部 CSS/JS，这是安全限制，不是 bug。
现象是 Network 面板中 CSS 请求显示 blocked 或 net::ERR_FILE_NOT_FOUND，控制台往往无明确报错。
解决办法只有启动本地 HTTP 服务：
- Python：运行
python -m http.server 8000，然后访问http://localhost:8000/index.html - VS Code：安装 Live Server 插件，右键 HTML 文件 → “Open with Live Server”
- Node.js：全局安装
serve，运行serve -s .
别用 --disable-web-security 启动浏览器绕过——这只是临时验证手段，不能当开发常态用。
