狂欢电子商务 - 无法覆盖 css答案

【问题标题】：Spree eCommerce - Cannot override css狂欢电子商务 - 无法覆盖 css
【发布时间】：2019-06-22 11:07:59
【问题描述】：

我需要覆盖我的狂欢商店的标题颜色。我在 ../mystore/vendor/assets/stylesheets/spree/frontend 目录下创建了一个 custom.css。但它不起作用。请帮忙

spree header的默认css样式如下所示

#spree-header #header {
    background: rgba(34,34,34,0.4);
    padding: 20px 0;
}

下面是我的 custom.css 文件

#spree-header #header {
    background: white !important;
    padding: 20px 0;
}

我希望我的狂欢标题将颜色更改为白色。

【问题讨论】：

我不知道 Spree，但是你的 css 文件是在默认文件之后加载的吗？加载 css 的顺序很重要。如果你不能改变它（或者如果它已经在正确的顺序并且仍然不起作用）你可以尝试让你的选择器更具体（例如 div#spree-header header#header）。或者（如果可能）在 html 和你的 css 中添加一个类。
您确定您的 custom.css 已加载到您的页面中吗？你可以使用 borwser 的 DevTools 来检查一下。

标签： css spree

【解决方案1】：

您不能用rgb() 颜色覆盖rgba() 颜色。

在本例中，white 是保留字，代表rgb(255, 255, 255)。

代替：

background-color: white;

使用：

background-color: rgba(255, 255, 255, 1);

注意 background 是一个多值简写属性。

如果您只打算声明背景颜色，请使用background-color。

有关background 速记属性可以采用的所有值的更多信息，请参阅：

有关background-color 属性的更多信息，请参阅：

【讨论】：

谢谢@RezaRamezanpour - 这很有帮助。 rgb(n, n, n) 不会覆盖 rgba(n, n, n, n) 的情况总是如此（可能是 4-5 年前？）。从您的示例中，我想知道现在的浏览器标准是否允许 rgb(n, n, n) 和 rgba(n, n, n, n) 相互覆盖？
@Rounin 是的，您可以轻松地覆盖它们而没有问题。我不确定 4-5 年前，但我从未听说过；-)