WordPress主题中如何使用两个CSS文件的类？解决样式覆盖问题

问题原因 #

你在wp_enqueue_style中把bootstrap.min.css的依赖设置为style，这会让Bootstrap的CSS文件在style.css之后加载。如果anti-white类的样式优先级和Bootstrap中冲突的样式优先级相同，后加载的Bootstrap样式就会覆盖style.css里的anti-white样式。

解决方法 #

方法1：调整CSS加载顺序 #

修改add_theme_scripts函数，让style.css依赖Bootstrap，这样style.css会在Bootstrap之后加载，它的样式就能覆盖Bootstrap的冲突样式：

function add_theme_scripts()
{
    // 先加载Bootstrap CSS
    wp_enqueue_style('bootstrap.min.css', get_template_directory_uri() . '/assets/css/framework/bootstrap/css/bootstrap.min.css', array(), '1.7', 'all');
    // 让style.css依赖Bootstrap，确保在其后加载
    wp_enqueue_style( 'style', get_stylesheet_uri(), array('bootstrap.min.css'), '1.0', 'all');

    wp_enqueue_script('bootstrap.bundle.min.js', get_template_directory_uri() . '/assets/css/framework/bootstrap/js/bootstrap.bundle.min.js', array('jquery'), 1.1, true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');

方法2：提高样式优先级 #

如果不想调整加载顺序，可以给anti-white类的样式增加优先级：

• 使用更具体的选择器（推荐，符合CSS规范）：

.navbar-brand.anti-white {
    /* 这里写你的anti-white样式，比如 */
    color: #ffffff;
}

• 临时使用!important（仅应急用，不推荐大量使用，会增加样式维护难度）：

.anti-white {
    color: #ffffff !important;
}

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