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

Question

我希望用我的自定义插件覆盖插件的 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 使用我的代码编辑器进行编码的工作流程，而且我知道有插件可以做到这一点，但我希望减少安装并在此过程中学习新的东西。

Answer 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' );
}