Z-Blog 主题升级后样式错乱：CSS 优先级与缓存排查

先说结论：主题升级后样式错乱，八成不是主题坏了，而是旧 CSS 还在缓存里、或你改过的样式被新版覆盖、或自定义代码与新版选择器冲突。按「缓存 → 覆盖 → 冲突」三步查。

一、先排除缓存

• 浏览器强刷（Ctrl+F5）或用无痕窗口访问。
• 检查主题是否给 CSS 加了版本号参数；升级后版本号没变，浏览器会继续用旧文件。
• CDN 未刷新也会导致新旧 CSS 混合加载，出现「一半新一半旧」的诡异样式。
• 主题缓存与模板编译缓存要一起清。

二、确认是不是「你的修改被覆盖」

直接改主题文件的自定义样式，升级时会整目录被替换，改动自然丢失。这是最常见的原因。正确做法：

• 把自定义样式放到独立 CSS 文件或「自定义 CSS」入口，不碰主题原文件。
• 用子主题方式扩展（若主题支持）。
• 升级前先备份被改过的文件。

三、查 CSS 优先级冲突

1. 用开发者工具选中错乱元素，看哪条规则生效、来自哪个文件。
2. 新版可能提高了选择器权重或用了 !important，把老覆盖压下去了。
3. 增加选择器特异性，或用同样机制的覆盖方式，别盲目堆 !important。
4. 注意加载顺序：后加载的同权重规则会赢，调整引入顺序有时比改权重更干净。

四、结构变化导致的错乱

新版可能改了 HTML 结构或类名，旧的自定义选择器就失效了。这种情况不是覆盖问题，而是选择器已不存在，需要对着新 DOM 重写。

五、升级前后的规范动作

• 升级前：备份主题目录 + 记录自己改过的文件清单。
• 升级后：无痕窗口逐页检查首页、列表、详情、单页、移动端。
• 发现问题：先清缓存复测，再对比新旧 CSS，最后才动代码。

养成「自定义不碰原文件」的习惯，主题升级就再也不会是一场灾难。