Question

我有一个名为＆＃39; 请求更多信息的按钮＆＃39;使用下面的代码及其css类＆＃39; plp-description-request-btn＆＃39;来自 main.css （皮肤\前端\主题\默认\ CSS \的main.css）

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

应用\设计\前端\主题\默认\布局\ page.xml

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

我需要覆盖从main.css到我的custom.css文件（\ skin \ frontend \ theme \ default \ css \ custom.css）的特定元素的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;
}

Answer 1

使用！important应该是最后的选择。你要检查的第一件事是CSS是否完全加载。如果是，但被覆盖，那可能只是目标特异性的问题。

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

Answer 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;
}

Magento：将css类重写到我的自定义css文件中

2 个答案: