WordPress子主题CSS未更新求助：样式已加载但修改不生效

嘿，我之前也踩过子主题CSS不生效的坑，结合你的情况（能看到样式表但修改不体现），给你几个实用的排查方向：

1. 先排查样式优先级/被覆盖问题 #

打开浏览器开发者工具（F12），选中你要修改的元素，查看右侧的Styles面板：

• 如果你的新样式被划掉了，说明父主题或其他CSS的权重更高，把你的选择器写得更具体（比如加上父元素的类，比如.site-header .my-custom-class），或者临时用!important测试（注意生产环境尽量少用，避免后续样式冲突）。

2. 确认子主题样式的加载逻辑是否正确 #

检查子主题的functions.php，确保你正确加载了子主题样式，且依赖父主题样式（这样子主题会在父主题之后加载，优先级更高）。正确的代码示例：

function my_child_theme_enqueue_styles() {
    // 替换成你父主题的样式句柄，一般是父主题slug + "-style"，比如twentytwentyfour-style
    $parent_style = 'parent-style'; 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ), // 关键：设置依赖父主题样式
        wp_get_theme()->get('Version') // 用子主题版本号强制浏览器刷新缓存
    );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );

另外，每次修改CSS后，记得更新子主题style.css头部的Version值（比如从1.0改成1.1），这样浏览器会重新加载新的样式文件。

3. 彻底清理各类缓存 #

你说已经清了缓存，但可能漏了这些地方：

• 浏览器强制刷新：用Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）绕过浏览器缓存，直接加载最新资源。
• 服务器/CDN缓存：如果用了WP Rocket、W3 Total Cache这类缓存插件，或者主机商自带的CDN，去插件/主机后台手动清理缓存，甚至暂时禁用插件测试。
• WordPress自定义izer缓存：有些主题会缓存自定义izer的设置，试着在自定义izer里随便改个小设置再保存，触发缓存刷新。

4. 检查后台编辑器的修改是否真的保存到服务器 #

有时候后台编辑器显示修改成功，但服务器上的文件没更新，大概率是文件权限问题：

• 用FTP工具（比如FileZilla）连接服务器，找到子主题的style.css，打开看看你在后台改的内容是不是真的存在。
• 如果不存在，给子主题文件夹设置755权限，文件设置644权限，再重新编辑保存。
• 另外，确认你编辑的是子主题的style.css，别误操作成父主题的了（父主题更新会覆盖你的修改）。

5. 排查其他CSS来源的覆盖 #

除了父主题和子主题，还有这些地方可能覆盖你的样式：

• 插件的CSS文件：有些插件会加载自己的样式，且加载顺序在子主题之后。
• WordPress自定义izer里的「额外CSS」：这里的样式优先级很高，会覆盖子主题的样式。
• 主题自带的自定义CSS面板：部分主题有自己的CSS编辑器，优先级也可能高于子主题。

用开发者工具查看样式加载顺序，找到最后加载的CSS文件，调整你的选择器权重即可。

内容的提问来源于stack exchange，提问作者Dan Baker