覆盖Materialize CSS属性

Question

我已经先引入了 Materialize 的 CSS，然后再链接我的 CSS 文件。

在我的 CSS 文件中，我有一个示例类，将 background-color 属性设置为 red，但是这并没有覆盖 materialize-css 设置的默认颜色。

以下是示例： https://jsfiddle.net/79ss2eyr/1/ 我不想更改 materialize 源文件中的任何内容，而是想添加额外的类并设置我的额外颜色。

以下是检查器显示的内容：

我该如何做，为什么我的CSS属性不能覆盖Materialize的属性，因为它是在框架之后链接的？

- Ivanka Todorova

---

我想你希望文本的颜色是红色吗？ - Gaurav Aggarwal

@GauravAggarwal 抱歉，在 jsfiddle 上犯了一个错误。已经修复了。 - Ivanka Todorova

没有问题...请检查我的答案和你的解决方案。 - Gaurav Aggarwal

Answer 1

在Inn Materialize中，规则由footer.page-footer {}设置，但你只写了.app-bg。因此，你无法覆盖Materialize的规则。

如果你想覆盖该类，可以使用footer.app-bg或使用!important：

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

或者

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

- krishna

---

这很奇怪...你编辑了krishna的完整答案并将其他答案合并在其中？ - Gaurav Aggarwal

@ Gaurav Aggarwal --- 不对啦... @ Ivanka Todorova 只是在格式化我的回答，没有合并。 - krishna

不应鼓励使用 !important。这是一种非常糟糕的做法。 - Manuel Ro

Answer 2

让CSS选择器更具体，像这样：

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

- print x div 0

Answer 3

如果由于其他应用的 CSS 而导致您的 CSS 未应用于元素，请使用 !important 指定您的 CSS 很重要。

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

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

- Gaurav Aggarwal