html - 如何覆盖类？

Question

为什么下面的 gradientappy 类不覆盖 stripe-button-el 类中的设置？

此外，是否有比使用所有 !important 属性更好的方法来做到这一点？

CSS:

.gradientapply {
    background:-webkit-linear-gradient(top, #46A1DA 0%, #3083B8 100%) !important;
    background:-moz-linear-gradient(top, #46A1DA 0%, #3083B8 100%) !important;
    background:-ms-linear-gradient(top, #46A1DA 0%, #3083B8 100%) !important;
    background:-o-linear-gradient(top, #46A1DA 0%, #3083B8 100%) !important;
    background:linear-gradient(to bottom, #46A1DA 0%, #3083B8 100%) !important;
    }

HTML:

<button type="submit" ng-click="pay()" class="gradientapply stripe-button-el" style="visibility: visible;width:270px;height:72px;">
<span style="display: block; min-height: 72px;font-size:32px;padding-top:20px;">Buy Now</span></button>

示例:http://jsfiddle.net/5tyhcbwo/

Answer 1

看起来你的 .stripe-button-el span 应用了背景......因为它在你的 .gradientapply 类之上，你不能看它的背景。您必须删除或覆盖 .stripe-button-el span 上的背景。

这是一个 jsFiddle只需添加 .stripe-button-el span { background: none; 。

Also, is there a better way to do this than using all the !important attributes?

不幸的是，没有。如果没有 !important，将应用 .stripe-button-el 类。