WordPress引入Bootstrap后自定义CSS样式文件不生效如何解决？

问题根因 #

你的CSS样式加载顺序设置错误。浏览器对同优先级选择器的样式会遵循 「后加载覆盖先加载」 的规则，你当前的代码中Bootstrap样式是最后加载的，优先级自然高于你之前加载的自定义样式，所以自定义规则会被Bootstrap覆盖。

修复方法 #

调整样式加载顺序，优先加载Bootstrap框架样式，再加载你的自定义样式，同时可以给自定义样式添加依赖声明，确保WordPress自动按正确顺序加载资源，修改后的代码如下：

function load_stylesheets()
{
    // 优先加载Bootstrap
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . "/css/bootstrap.min.css", array(), false, 'all' );
    // 再加载主题默认style.css，依赖项填bootstrap确保在Bootstrap之后加载
    wp_enqueue_style( 'stylesheet', get_template_directory_uri() . "/style.css", array('bootstrap'), false, 'all' );
    // 最后加载自定义的site-stil.css，优先级最高
    wp_enqueue_style( 'site-stil', get_template_directory_uri() . "/css/site-stil.css", array('bootstrap'), false, 'all' );
}
add_action('wp_enqueue_scripts','load_stylesheets');

补充注意事项 #

如果调整顺序后仍然有部分样式被Bootstrap覆盖，属于选择器优先级问题，可以通过提高自定义规则的选择器优先级解决：比如给自定义规则添加父级类名前缀，避免直接使用和Bootstrap完全相同的选择器。非特殊情况不建议使用!important强制覆盖，会增加后续样式维护成本。

内容的提问来源于stack exchange，提问作者Ersin Koray Gonce