Question

我无法覆盖按钮的背景颜色，其颜色在某些第三方CSS中设置。

在我的checkout.css文件之前加载（第三方）styles.css：

// styles.css

#ac-page #checkoutSteps footer .button {
    background-color: #ea830d;
    border-color: #ea830d #ea830d #a25a09;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

然后在我的CSS中：

// checkout.css

body.checkout-onepage-index #ac-page #checkoutSteps footer .button {
    background-color: #E5582C;
    border: 3px solid red;
}

<div id='ac-page'>
    ...
    <ol class='opc' id='checkoutSteps'>
        <li>
            ...
            <footer id="shipping-buttons-container" class="" style="">
                <button type="button" class="button" title="Proceed To Shipping Type" onclick="shipping.save()">Proceed To Shipping Type</button>
                <span id="shipping-please-wait" class="please-wait" style="display: none;">
                    <img src="../loader.gif" alt="Loading next step..." title="Loading next step..." class="v-middle"> Loading next step...
                </span>
                <p class="required">* Required Fields</p>
            </footer>
        </li>
</div>

在除IE9之外的每个浏览器中，我的checkout.css规则优先，因为它更合格。我在这里失踪的东西？

更新：

我尝试在规则中添加!important，但没有帮助。

另外，我应该注意到有一个边框覆盖，正常工作。

关于IE9的“Firebug Lite”的另一个非常奇怪的事情是我用来尝试检查并更好地理解优先顺序 - 它不会向我显示任何来自{{1完全没有。我知道来自checkout.css的一些规则正在生效 - 例如边界 - 但它并没有在检查员中向我显示任何规则。

更新2：

发布标记

Answer 1

原来在第三方CSS中有一个坏男孩：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEA830D', endColorstr='#FFEA830D', GradientType=0);

这是背景颜色渐变。

把

filter: none;

在checkout.css修复了它。

IE9优先顺序与背景颜色

1 个答案: