CSS样式不生效的首要原因是被更高优先级规则覆盖或文件未加载成功；需检查开发者工具中样式是否被划掉、Network面板状态码是否为200，并核对选择器匹配、变量拼写及加载位置。
检查样式是否被更高优先级规则覆盖
哪怕你写的 color: red 完全正确，只要页面里存在一条权重更高的规则（比如带 !important 的内联样式，或一个 #header .nav a 这样的选择器），它就会被划掉、不生效。浏览器开发者工具的 Styles 面板里，被删除线标出的声明就是被“干掉”了。
- 打开 F12 → 选中元素 → 看右侧
Styles面板，找你的规则是否出现、是否被划掉 - 注意右上角显示的权重值（如
0,1,2,1），ID 越多、类越多，权重越高 - 避免滥用
!important：它能临时解燃眉之急，但会让后续调试变成“谁最后加谁赢”的混乱局面
确认 CSS 文件是否真被加载并解析
很多“样式不生效”，其实压根没走到渲染那步——CSS 文件根本没加载成功。Network 面板里一个 404 或 403 就足以让整张样式表作废。
- 在 Network 标签页筛选
css，刷新页面，看目标文件状态码是不是200 - 路径写错很常见：
href="css/style.css"在/admin/index.html下会请求/admin/css/style.css，不是你想要的；改用绝对路径href="/css/style.css"更稳 - 构建工具（Vite/Webpack）常把 CSS 输出到
/assets/xxx.css，但你还在link里写style.css？那就必然 404
验证选择器是否真正匹配目标元素
看着像，不一定真匹配。一个空格、一个点号、一个大小写错误，都可能导致选择器完全失效。
