覆盖 Materialise CSS 属性

Question

我包含了 first Materialize 的 CSS 和 then 我已经链接了我的 css 文件。

我有一个示例 class 将 background-color 属性 设置为 red，但不会覆盖默认颜色（由 materialize- css).

举个例子： https://jsfiddle.net/79ss2eyr/1/

我不想更改 materialize 的源文件中的任何内容，而是想添加额外的 classes 并设置额外的颜色。

检查员是这样说的：

我应该怎么做，为什么我的 css 属性不覆盖实体化的，因为它链接在 框架之后？

Answer 1

如果您的 css 由于其他应用 css 而未应用于该元素，只需使用 !important 指定您的 css 很重要。

.app-bg {
  background-color: red !important;
}

示例：https://jsfiddle.net/79ss2eyr/2/

Answer 2

使 css 选择器更具体，如下所示：

footer.app-bg {
  background-color: red;
}

Answer 3

Inn Materialise 的规则是由 footer.page-footer {} 设定的，但您写的只是 .app-bg。所以你不能覆盖 Materialize 的规则。

如果您想覆盖 class，您可以使用 footer.app-bg 或使用 !important:

footer.app-bg {
  background-color: red;
}

或

.app-bg {
  background-color: red !important;
}