覆盖 woocommerce !important 类

Question

我正在尝试覆盖默认设置为 !important 的 woocommerce css 类。我怎样才能覆盖它？

默认为：

.woocommerce-error, .woocommerce-info, .woocommerce-message{
 padding: 1em 2em 1em 3.5em!important;}

我尝试了以下但不想知道：

main .post .entry .woocommerce-error, .woocommerce-info, .woocommerce-message{padding: 0 0 10px 0 !important;}

不确定我是否可以更改原始的 woocommerce 样式表，因为我假设我所做的更改将在插件更新时被覆盖。

非常感谢。

Answer 1

那是因为你忽略了逗号，实际上在你的那一行中有 3 条规则，你必须为每一条都指定它。这应该有效：

main .post .entry .woocommerce-error, 
main .post .entry .woocommerce-info, 
main .post .entry .woocommerce-message { 
    padding: 0 0 10px 0 !important; 
}

Answer 2

为了覆盖默认的 Woocommerce 样式，最好通过在您的 functions.php 文件中输入以下内容来禁用样式表：

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

通过这种方式，您可以避免使用 !important，因为这是一种不好的做法，并可以自定义商店以使其看起来像您希望的那样。

默认情况下，Woocommerce 将 3 个样式表排入队列，上面的 sn-p 将禁用所有样式表，如果您希望单独禁用每个样式表，您可以添加：

// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );    // Remove the gloss
    unset( $enqueue_styles['woocommerce-layout'] );     // Remove the layout
    unset( $enqueue_styles['woocommerce-smallscreen'] );    // Remove the smallscreen optimisation
    return $enqueue_styles;
}

更多信息请看这里：Woomerce Docs

Answer 3

!important 非常邪恶，应该避免，除非你真的 10000% 确定你不会后悔（或者你可能想做一个简单的实用程序类，这没关系）。我从不使用 Woo-commerce，但他们在 css 中使用!important 规则实在是太可惜了，这将很难制作出任何其他能够超越这种特殊性的样式。

无论如何，我知道的最好方法是在可能的情况下向要覆盖的元素添加一个 ID，并添加一个新的选择器以提高特异性，并将 !important 规则添加到该选择器（下面的示例）。但如果不是，好吧，我不知道。

#newselector{
    padding: 1em 2em 1em 3.5em!important;
}

!important是邪恶的，如果它突然把你生吞活剥，希望你不要害怕。