Переопределить css по умолчанию в Woocommerce

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 по умолчанию .woocommerce a.button.alt.В частности, ваша специфика 0-2-1 (2 класса + 1 селектор), что ниже значения по умолчанию 0-3-1 (3 класса + 1 селектор).

Попробуйте добавить !important (см. документы ), чтобы переопределить стандартное 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;
}