css样式不生效90%是浏览器未加载css文件：先确认拼写正确且被识别，再查路径、content-type是否为text/css、样式覆盖、选择器匹配及file://协议限制。
样式不生效，90% 的情况不是 CSS 写错了，而是浏览器压根没加载到你的 CSS 文件——先确认 link 标签有没有被识别，再查路径、顺序、权重。
rel="stylesheet" 拼写错误导致 CSS 完全不加载
浏览器对 rel 属性值严格匹配，写成 rel="sytlesheet"（多 y 少 t）、rel="styleSheet" 或 rel="css" 都会被直接忽略。不报错、不发请求、不渲染任何样式，页面就是纯 HTML 流式结构。
- 打开开发者工具 → Elements 面板，检查
中的<link>标签，确认rel值是否为stylesheet - 切到 Network 面板，过滤
css，刷新页面：若目标文件完全不出现，基本可锁定是拼写或标签未闭合问题 - VS Code 输入
<link rel="会自动提示合法值，善用补全能避免手误
CSS 文件返回 200 但样式仍无效
Network 显示状态码是 200，说明文件已加载，问题转向解析与层叠逻辑。
- 检查响应头
Content-Type是否为text/css；Nginx/Apache 若配置不当，可能返回text/plain，浏览器拒绝解析 - 在 Elements 面板选中目标元素，右侧 Styles 面板中看哪些规则被划掉（strikethrough），点开被划掉项，查看 “specificity” 值和覆盖来源
- 注意
all: unset或all: revert这类全局重置规则，可能切断继承链，让color、font-size等失效 - 框架如 Vue/React 的 scoped style 或 CSS-in-JS 可能自动加属性选择器前缀，导致你写的规则被隔离
class 名写错或 HTML 结构不匹配
CSS 选择器必须精确匹配 DOM 结构，大小写、连字符/下划线、空格都敏感。
class=" btn-primary> 对应 CSS 必须是 <code>.btn-primary，写成.btn_primary或.btnPrimary就不生效- 多个 class 间用了全角空格或中文逗号：
class="header，footer"→ 浏览器只认第一个 <div class="box"> 但 CSS 写了 <code>box{}（漏了点号），会被当成标签选择器去匹配<box></box>，自然失败-
<style></style>标签若被误放在外、注释里，或被 JS 动态移除，也会静默失效 - Flex 子项默认
flex-shrink: 1，内容短时会收缩；要固定宽高，加flex: 0 0 200px或单独设flex-shrink: 0 - Grid 子项默认不占满轨道，
width: 100%在多数场景不可靠；优先用justify-self: stretch或确保父容器有明确列定义（如grid-template-columns: 1fr 200px） - Flex 子项默认
min-width: auto，容易撑开容器破坏换行；加min-width: 0或overflow: hidden抑制 - 别忘了
box-sizing: border-box—— 默认content-box下，padding会额外撑宽，导致布局错乱
Flex/Grid 布局子项 width/height 不响应
Flex 和 Grid 子项默认行为会覆盖显式设置的尺寸，不是 bug，是设计使然。
最容易被忽略的是：本地双击打开 HTML 时，file:// 协议下现代浏览器会阻止外部 CSS 加载（显示 net::ERR_FILE_NOT_FOUND 或 blocked），这不是代码问题，是安全限制。必须起本地服务（如 VS Code Live Server）才能真实验证加载链路。
