CSS样式失效需先确认文件是否加载（Network查200），再用DevTools看被划掉规则的specificity值（如0,1,1,2），逐位比较ID/类/标签权重，同权时后定义者胜；注意scoped、内联样式及CSS-in-JS干扰。
当你在Laravel项目中引入CSS文件后发现按钮颜色没变、字体大小回退、边框消失，不是代码写错了，而是某条规则在层叠计算中被判“出局”——必须用浏览器开发者工具定位具体哪条规则赢了、为什么赢，而不是靠猜或反复改引入顺序。
第一步：确认样式是否真正加载
打开浏览器开发者工具（F12）→ Network 标签页 → 筛选 css → 查看你的自定义 CSS 文件（如 app.css 或 custom.css）状态码是否为 200；若显示 404，说明 Laravel 的 asset() 路径错误或文件未编译到 public 目录。
检查 HTML 源码中 标签的 href 是否正确生成，例如应为 ，而非 /css//app.css 或 /css/app.css?v=123（版本号参数错误可能导致缓存误判）。
【关键前提】 若 Network 中该 CSS 文件未发起请求，后续所有样式调试都无意义——先解决加载失败，再谈覆盖。
立即学习“前端免费学习笔记（深入）”；
第二步：用 DevTools 锁定被覆盖的具体声明
在 Elements 面板中右键点击目标元素 → “Inspect”，右侧 Styles 面板会列出所有匹配的 CSS 规则；找到你写的那条声明（比如 color: #e74c3c），如果它被划掉（strikethrough），说明已被更高优先级规则覆盖。
点击被划掉的声明旁的文件名链接，直接跳转到源码位置——注意看它来自 bootstrap.css、tailwind.css 还是 vendor.js 动态注入的 style 标签，这决定了你是和框架对抗，还是和自己写的另一处样式冲突。
重点看该规则右侧标注的 specificity 值，格式为 0,1,1,2；记住：数值从左到右逐位比较，不进位，0,2,0,0 > 0,1,1,5。
第三步：比对两条规则的权重与来源顺序
在 Styles 面板中同时展开你写的规则和压倒它的那条规则，对照四元组：
① 数清 ID 选择器个数（#header 算 1 个，#header#nav 不合法，只计 1）；
② 数清类名、属性选择器、伪类个数（.btn、[type="submit"]、:hover 各算 1）；
③ 数清标签和伪元素个数（button、::before 各算 1）；
④ 若前三位完全相同，则后出现的规则胜出——这时要查 Laravel 模板中 和
注意：Laravel Mix 编译后的 CSS 文件里，@import 规则不会提升优先级，它只是把内容“粘贴”进来，权重仍由选择器本身决定。
第四步：验证是否被 scoped 或模块化机制隔离
如果你在 Vue 单文件组件中使用
方法一：在 Vue 组件内用 :deep(.btn) { color: red } 主动穿透作用域；
方法二：把需覆盖的样式写进该组件的
【易错点】 不要试图在 layout.blade.php 里用
第五步：快速排除内联样式与 CSS-in-JS 干扰
在 Elements 面板中检查目标元素是否有 style 属性（如 style="color: blue"），若有，其权重为 1000，普通 CSS 几乎无法覆盖；
若项目用了 Alpine.js、Livewire 或 Tailwind JIT，某些交互状态（如 x-on:click）可能触发内联 style 注入；
查看 Styles 面板中带 [data-emotion]、[data-styled] 或类似属性的规则，这些是 Emotion、Styled Components 等 CSS-in-JS 库生成的，权重通常高于普通 class，需用更具体的选择器或 :where() 降权处理。
