如何覆盖！重要风格并在价格旁边显示“添加到购物车”按钮？

Question

我在页面上添加到购物车按钮时遇到问题。例如here“添加到购物车”由于某种原因没有显示。检查CSS类时，我看到这个CSS规则：

.woocommerce a.button, .woocommerce-page a.button, .woocommerce 
button.button, .woocommerce-page button.button, .woocommerce input.button, 
.woocommerce-page input.button, .woocommerce #respond input#submit, 
.woocommerce-page #respond input#submit, .woocommerce #content input.button, 
.woocommerce-page #content input.button {
background: #fff !important;
box-shadow: none;
}

这是带有按钮的那部分的整个HTML：

<a rel="nofollow" href="/digital-products/sound-kits/808-kits/?add-to-
cart=1529" data-quantity="1" data-product_id="1529" data-product_sku="" 
class="button product_type_simple add_to_cart_button 
ajax_add_to_cart">Přidat</a>

将此代码插入自定义CSS时，不能覆盖该重要规则，并将颜色更改为其他。这里的一些，如何覆盖它并改变颜色，并在价格旁边稍微移动一下？

Answer 1

您将不得不使用一个选择器，包括！要覆盖的样式旁边的！important，并使它比您同时覆盖的选择器更具体。

Answer 2

这个CSS调整我自己解决了我的问题：

.products .product .add_to_cart_button {
display: inline-block;
background: #070bf7 !important;
top:360px;
left:30px;
color:#fff;
}


.woocommerce ul.products li.product .button {
 margin-top:370px;
margin-left:70px;
opacity:1;
}