CSS未生效需双线排查：先用开发者工具“元素”面板确认规则是否注入及“计算样式”验证属性值，再硬性重载、清除专属缓存、禁用硬件加速、无痕模式排除扩展干扰、检查网络请求响应内容并修正CSS路径。
谷歌浏览器打开网页后只剩HTML骨架，文字堆叠、导航栏塌陷、按钮消失、排版像被揉皱的纸——这不是网页写错了，而是CSS样式表根本没生效，必须从加载链路和渲染机制双线切入排查。
确认CSS是否真被解析执行
按F12打开开发者工具→切换到“元素”面板→用左上角选择器点击一个明显错位的元素（比如本该固定在顶部的导航栏）→右侧“样式”面板中搜索该元素应有的类名（如.header、.nav-main）；若完全找不到对应CSS规则，说明样式未注入DOM或被JS动态移除。
再点开右侧“计算样式”标签页，搜索display、margin、color等关键属性；若显示值为浏览器默认值（如display: inline而非block），则证明规则被覆盖或忽略——【不要只看Network里.css状态是200就认为CSS正常】。
强制清除CSS专属缓存并跳过本地副本
方法一：硬性重载
在已打开的问题网页中，按住Ctrl + Shift + R（Windows/Linux）或Cmd + Shift + R（Mac）执行硬性重载：它会忽略所有缓存，向服务器发起带Cache-Control: no-cache头的请求，强制拉取全新CSS内容。
方法二：彻底清除+进程终结
进入chrome://settings/clearBrowserData→时间范围选“所有时间”→勾选“缓存的图片和文件”+“Cookie及其他网站数据”+“托管应用数据”→点击“清除数据”→关闭所有Chrome窗口→在任务管理器中结束全部chrome.exe进程→重新启动浏览器。
检查网络请求与资源加载路径
第一步：打开Network面板
在问题网页按F12→切换到“网络”标签页→刷新页面→筛选类型为CSS。
第二步：逐个验证响应内容
找到报错的.css请求→点击→查看Response标签页；如果看到的是HTML代码（比如404页面、登录跳转页或Nginx默认错误页），说明路径错误，服务器根本没返回CSS文件。
第三步：修正HTML中的引用路径
若href="/style.css"，立刻改为href="style.css"或href="./style.css"——【以/开头的路径在file://协议下会指向系统根目录，不是当前文件夹】；若用的是本地双击打开HTML，必须改用http://协议访问（如Live Server或python -m http.server）。
禁用硬件加速与GPU合成路径
点击右上角三点 → “设置” → 左侧点“系统” → 找到“使用硬件加速模式(如果可用)”→ 关闭开关 →【必须重启浏览器，仅刷新无效】。
退出Chrome所有进程 → 右键桌面Chrome快捷方式 → 属性 → 在“目标”末尾添加空格后加：--disable-gpu。
通过无痕模式排除扩展干扰
按Ctrl + Shift + N（Windows/Linux）或Cmd + Shift + N（Mac）打开无痕窗口→在地址栏输入问题网页URL并回车。
如果无痕窗口中页面样式正常，说明问题出在常规窗口的扩展、缓存或自动填充上。此时不用清空全部数据，直接进chrome://extensions禁用所有扩展，再逐个启用定位冲突源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
