子主题CSS加载优先级问题：如何让其晚于父主题Bootstrap加载

首先，核心问题很明确：你的子主题CSS加载顺序不对，被父主题的Bootstrap（以及父主题主样式）抢先加载了，导致自定义样式被覆盖。要解决这个问题，关键是利用WordPress的wp_enqueue_style依赖机制，确保子主题样式在所有父主题样式之后加载。

正确的子主题functions.php代码写法 #

Activello主题的主样式句柄是activello-style，它已经包含了Bootstrap（或者至少是在Bootstrap之后加载的），所以我们只需要让子主题样式依赖这个父主题句柄，同时调整动作优先级确保后执行：

function activello_child_enqueue_styles() {
    // 定义父主题的主样式句柄
    $parent_theme_style = 'activello-style';

    // 先加载父主题的主样式（包含Bootstrap）
    wp_enqueue_style( $parent_theme_style, get_template_directory_uri() . '/style.css' );

    // 加载子主题样式，明确依赖父主题样式，确保加载顺序靠后
    wp_enqueue_style( 'activello-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_theme_style ), // 关键：设置依赖父主题样式
        wp_get_theme()->get('Version') // 版本号，方便更新时清除缓存
    );
}
// 设置优先级为11，比父主题默认的10高，确保子主题的enqueue动作后执行
add_action( 'wp_enqueue_scripts', 'activello_child_enqueue_styles', 11 );

你的代码可能存在的常见问题 #

我猜你的代码大概率踩了以下其中一个坑：

• 没设置依赖关系：如果子主题样式没有指定依赖activello-style，WordPress可能会随机加载顺序，导致子主题样式先加载被覆盖
• 优先级设置过低：父主题的样式注册通常用优先级10，如果你的代码用了相同或更低的优先级，会先于父主题执行，加载顺序自然不对
• 用错了父主题句柄：比如你依赖了错误的句柄（比如直接写bootstrap而不是Activello官方的activello-style），导致依赖不生效

验证方法 #

修改代码后，打开你的页面，查看源代码（按F12），找到<head>里的CSS链接，确认子主题的style.css是在bootstrap.min.css和activello-style.css之后加载的——只要顺序对了，样式覆盖问题就解决了。

如果Activello是单独加载Bootstrap（句柄为activello-bootstrap），那你可以把依赖改成array( 'activello-bootstrap', 'activello-style' )，确保子主题样式在两者之后加载。

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