子页面css不生效的根源是布局文件缺少@stack('styles')指令，需在末尾补上该指令，子视图用@push('styles')注入css，并确保其加载顺序在全局css之后、避免滥用!important。
在 Laravel Blade 中，子页面引入的 CSS 覆盖不了布局文件里的全局样式，或者反过来，全局样式把子页面特有样式干掉了——这通常不是代码写错了，而是引入路径、加载顺序、作用域边界三者没对齐。
确认主布局中预留了样式插槽
打开 resources/views/layouts/app.blade.php（或你实际使用的布局文件），检查 内是否包含 @stack('styles') 指令。
如果只有 <link rel="stylesheet" href="%7B%7B%20asset('css/app.css')%20%7D%7D"> 这类硬编码引入，没有 @stack('styles')，那子视图里用 @push('styles') 添加的 CSS 根本不会被渲染出来——【这是90%子页面样式不生效的根源】。
在 末尾、其他 CSS 引入之后，补上这一行：
@stack('styles')
子页面用 @push 正确注入 CSS
在子视图（如 resources/views/posts/index.blade.php）顶部，@extends 后立即使用 @push：
@push('styles')
<link href="%7B%7B%20asset('css/posts-index.css')%20%7D%7D" rel="stylesheet">
@endpush
注意：不要用 @section('styles') → @yield('styles') 这套逻辑，它只适合内容块，不适合资源栈；@push 才是专为 JS/CSS 等可叠加资源设计的。
如果子页面需要多个 CSS 文件，可以多次 @push('styles')，它们会按出现顺序追加到 @stack('styles') 的位置。
控制 CSS 加载顺序与权重边界
浏览器按 HTML 中 <link> 出现顺序解析样式，后加载的同权重规则会覆盖前面的。所以你要让子页面 CSS 在全局 CSS 之后加载。
第一步：确保主布局中 @stack('styles') 放在所有基础 CSS（如 app.css、normalize.css）之后、 之前。
第二步：子页面的 @push('styles') 必须写在 @extends 之后、@section('content') 之前——Blade 渲染时会把所有 @push 内容收集起来，统一注入到 @stack 占位处。
第三步：避免在子页面 CSS 中盲目提高选择器权重。比如全局有 .card { border: 1px solid #ccc; }，子页面别写 div.card { border: 2px solid red !important; }——【!important 会破坏后续所有覆盖逻辑，且无法被更高层样式安全接管】。
更稳妥的做法是：在子页面 CSS 文件里用 BEM 或命名空间前缀，例如 .posts-index__card，并确保该类名只出现在当前页面 DOM 中，从源头隔离作用域。
验证 CSS 是否真正进入浏览器样式表树
打开 Chrome DevTools → Network 标签页 → 刷新页面 → 筛选 CSS 类型 → 查看 posts-index.css 是否状态为 200 且 Size 不为 0。
如果显示 404 或 pending，说明 {{ asset('css/posts-index.css') }} 路径不对。Laravel 的 asset() 函数始终以 public/ 为根目录，CSS 文件必须放在 public/css/posts-index.css，而不是 resources/css/。
如果文件加载成功但样式没生效，在 Elements 面板选中目标元素 → 右侧 Styles 面板查看哪些规则被划掉 → 点击灰色被删规则旁的“invalid”提示，看是 specificity 不够还是来源被禁用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
