90%是浏览器未加载css文件：先确认拼写正确且被识别，再查路径是否可访问、响应头content-type是否为text/css，最后排查选择器匹配和层叠覆盖。
VSCode 里 HTML 打开后 CSS 样式不生效，90% 不是代码写错了，而是浏览器根本没加载到你的 CSS 文件——先确认 <link> 被识别、路径能访问、响应头是 text/css，再查选择器和层叠。
检查 <link rel="stylesheet"> 是否拼写正确
浏览器对 rel 值严格匹配，写成 rel="sytlesheet"（多 y 少 t）、rel="styleSheet"、rel="css" 或 rel="style" 都会被完全忽略：不发请求、不报错、页面纯 HTML 流式渲染。
- 打开开发者工具（F12）→ Network → 刷新 → 过滤
css，看目标文件是否出现；完全缺失 =rel错或标签未闭合 - Elements 面板中检查
下的<link>，确认rel值精确为stylesheet - VSCode 输入
<link rel="会自动提示合法值，善用补全可避免手误
验证 CSS 文件是否被浏览器成功加载并解析
Network 显示状态码是 200，不代表样式就起效——可能返回了错误的 Content-Type，或文件本身有语法错误导致静默跳过。
- 点击 Network 中的 CSS 文件 → 查看 Response Headers → 确认
Content-Type: text/css；若为text/plain，Nginx/Apache 需补配置 - 在 VSCode 中打开该 CSS 文件，检查是否有未闭合的大括号
{、漏分号、中文标点（如全角：或；）；插件遇到 parse error 会跳过整个文件 - 如果 CSS 在
dist/或build/目录下，VSCode 的bradlc.vscode-html-css插件默认不扫描——类名提示失效，但不影响浏览器加载；样式不生效则与此无关
排查选择器是否命中、是否被覆盖
即使 CSS 加载成功，.box 写成 box{}（漏点号）、class=" btn-primary> 对应 <code>.btn_primary（下划线 vs 连字符），都会导致规则不应用。
- 在 Elements 面板选中目标元素 → 右侧 Styles 面板查看哪些规则被划掉（strikethrough）→ 点开被划掉项，看 “specificity” 值和来源
<div class="header,footer"> 中的中文逗号或全角空格会让浏览器只认 <code>header，其余丢弃- Flex/Grid 子项设
width/height失效？不是 bug：子项默认flex-shrink: 1或不受容器轨道约束，加flex-shrink: 0或用justify-self: stretch - 右下角状态栏点击语言模式 → 选 “Change language mode” → 输入
html回车；若显示plaintext或javascript，<style></style>内属性提示会失效 - 确保 HTML 有完整结构：
；<link>必须在内，<style></style>标签不能放在外或注释块里 -
<style type="text/css"></style>中的type属性虽现代浏览器可省略，但部分插件更依赖它来触发解析
确认 VSCode 语言模式和 HTML 结构基础
VSCode 里 HTML 文件右下角显示的语言模式不是 HTML，或文档缺少基本结构，会导致内置补全和插件行为异常，间接干扰开发判断。
最容易被忽略的是：你改了 CSS 文件却没保存，或者浏览器缓存了旧版本；强制刷新（Ctrl+Shift+R）比普通 F5 更可靠。还有，file:// 协议下某些服务器头逻辑不生效，本地测试建议用 Live Server 插件起一个真实 HTTP 服务。
