css - 覆盖 Woocommerce 的默认 CSS

Question

我在购物车页面上的其中一个按钮的图像没有填满整个按钮。当我尝试删除填充时，它不起作用。下面的 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;
}

Answer 1

您的 a.button.vipps-express-checkout 比默认 CSS 的 具有较低的特异性(类似于权重或优先级，参见 docs )。 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;
}