使用自定義插件覆蓋插件 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' );
}