时间戳

首页 > 解决方案 > 覆盖 Woocommerce 的默认 css

css - 覆盖 Woocommerce 的默认 css

问题描述

购物车页面上我的一个按钮的图像没有填满整个按钮。当我尝试删除填充时，它不起作用。下面的 CSS 正在影响按钮。

.woocommerce a.button, .woocommerce button.button, .woocommerce 
.woocommerce-message a.button, .woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce 
input.button.alt, .woocommerce input.button, .woocommerce-cart table.cart 
td.actions .button, .woocommerce form.checkout_coupon .button, .woocommerce 
#respond input#submit {

border-radius: 2px;
padding: 10px 40px;
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    padding-left: 40px;

下面的 CSS 是我自己的，用于正确的按钮，但它没有做任何事情。如果我在浏览器中关闭上面的填充规则，我的 CSS 确实可以工作。有任何想法吗？

a.button.vipps-express-checkout{
padding: 0px;
}

标签： csswordpresswoocommerce

解决方案

您a.button.vipps-express-checkout的特异性（例如重量或优先级，请参阅docs）低于默认 CSS 的.woocommerce a.button.alt。具体来说，您的特异性是0-2-1（2 个类 + 1 个选择器），它低于默认的0-3-1（3 个类 + 1 个选择器）。

尝试添加!important（参见docs）来覆盖该特定属性的默认 css：

a.button.vipps-express-checkout{
    padding: 0px !important;
}

如果您不想使用!important，您可以尝试将您的特异性权重从0-2-1增加到0-4-1（添加 2 个以上的类），如下所示：

.woocomerce a.button.vipps-express-checkout.alt {
     padding: 0;
}

推荐阅读