Question

我正在尝试覆盖woocommerce css类，默认设置为！important。我怎样才能覆盖这个？

默认值为：

.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个样式表排入队列，上面的代码段将禁用所有这些样式表，如果您希望单独禁用每个样式表，则可以添加：

// 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是邪恶的，我希望你不要害怕，如果它突然吃掉了你。

覆盖一个woocommerce！重要的课程

3 个答案: