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
验证选择器是否真正匹配目标元素
看着像，不一定真匹配。一个空格、一个点号、一个大小写错误，都可能导致选择器完全失效。
-
.card .title匹配的是.card内部的.title元素；而.card > .title要求.title必须是.card的**直接子元素** - HTML 是
，你就不能写div.content—— 标签名必须一致 - CSS 变量拼错一个字母也会失效：
--primary-color定义了，却写成var(--primay-color)，结果整个border或background都不会渲染
留意加载顺序和作用域限制
CSS 不是写完就生效，它受引入位置、作用域边界、甚至 DOM 渲染时机影响。
立即学习“前端免费学习笔记（深入）”；
-
link标签必须放在里，放到底部会导致页面先无样式渲染，再闪一下才变样 - Vue 单文件组件、React 的 CSS-in-JS、Shadow DOM 等场景下，全局 CSS 默认不穿透；要改写成
:deep(.btn)或用::slotted() - 媒体查询没触发？
@media (min-width: 768px)在手机上当然不生效，别误判为“CSS 没起作用”
