Magento：将 css 类覆盖到我的自定义 css 文件中答案

【问题标题】：Magento : override css class into my custom css fileMagento：将 css 类覆盖到我的自定义 css 文件中
【发布时间】：2018-05-02 09:21:51
【问题描述】：

我有一个名为“请求更多信息”的按钮，其代码如下所示，其 css 类“plp-description-request-btn”来自 main.css (皮肤\前端\主题\默认\css\main.css)

<a href="javascript:void(0);" class="plp-description-request-btn">Request More Info</a>

app\design\frontend\theme\default\layout\page.xml

<action method="addItem"><type>skin_css</type> <name>css/custom.css</name></action>

我需要将特定元素的 css 类从 main.css 覆盖到我的 custom.css 文件 (\skin\frontend\theme\default\css\custom.css)

我在 custom.css 文件中尝试了类似下面的内容，但没有反映

.plp-1col-container .plp-description-request-btn{
    background-color: #cb9b36; 
    color: red;
    border: 2px solid #cb9b36;
    transition: .2s cubic-bezier(.15,.9,.5,1);
    margin-right: 7px;
}

【问题讨论】：

标签： css magento

【解决方案1】：

使用 !important 应该是最后的手段。您首先要检查的是 CSS 是否已加载。那么如果是，但被覆盖，它可能只是目标特异性的问题。

查看此页面了解更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【讨论】：

一些属性适用于重要的..可能是浏览器缓存是问题...magento缓存uf...

【解决方案2】：

认为您最好在原始 CSS 文件中进行更改，但如果这不是一个选项，您可以尝试：

.plp-1col-container .plp-description-request-btn{
    background-color: #cb9b36 !important; 
    color: red !important;
    border: 2px solid #cb9b36 !important;
    transition: .2s cubic-bezier(.15,.9,.5,1) !important;
    margin-right: 7px !important;
}

【讨论】：