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

您的<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td><button type="button">Click Me!</button></td> </tr> <tr> <td>11</td> <td>21</td> <td><button type="button">Click Me!</button></td> </tr> </table>的特异性要比默认CSS的a.button.vipps-express-checkout低（例如权重或优先级，请参见docs）。具体来说，您的特异性为 0-2-1 （2个类别+ 1个选择器），低于默认值的 0-3-1 （3个类别+ 1个选择器）。

尝试添加.woocommerce a.button.alt（请参阅docs）以覆盖该特定属性的默认CSS：

!important

如果您不想使用a.button.vipps-express-checkout{ padding: 0px !important; }，则可以尝试将特异性权重从 0-2-1 增加到 0-4-1 （再添加2个类），如下所示：

!important

覆盖Woocommerce的默认CSS

1 个答案: