使用自定义插件覆盖插件 CSS答案

【问题标题】：Override plugin CSS with custom plugin使用自定义插件覆盖插件 CSS
【发布时间】：2023-03-16 07:19:01
【问题描述】：

我希望用我的自定义插件覆盖插件的 CSS，并避免使用 !important。

目前我的插件 css 已加载此代码：

function eatsmart_load_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style( 'style', $plugin_url . 'style.css' );

}
add_action( 'wp_enqueue_scripts', 'eatsmart_load_plugin_css' );

例如，我使用的是基本 CSS，它只用 !important 覆盖

.woocommerce ul.products.columns-5 li.product, .woocommerce-page ul.products.columns-5 li.product {
    width: 20% !important; }

所以想知道有没有办法优先考虑这个 CSS，以便我遵循更好的做法？

提前感谢您的帮助。

我使用自己的插件执行此操作的原因是因为它有助于通过 FTP 使用我的代码编辑器进行编码的工作流程，而且我知道有插件可以做到这一点，但我希望减少安装并学习新的东西路。

【问题讨论】：

标签： php css wordpress plugins woocommerce-product-bundles

【解决方案1】：

您可以使用wp_dequeue_style 删除入队样式，然后添加自定义 CSS

add_action( 'wp_enqueue_scripts', 'remove_plugin_css_and_add_my_custom_css', 11 );
function remove_plugin_css_and_add_my_custom_css() {
    wp_dequeue_style( 'style' );
    wp_enqueue_style( 'your-handle', 'your-css-path' );
}

【讨论】：