为什么一个CSS类会覆盖另一个？

我正在从事一个Vue.js项目，该项目使用Vuetify和Vue flash消息。我试图通过编辑其样式将警告消息背景设置为“blueviolet”：

.flash__message.warning {
  color: #ffffff;
  background-color: blueviolet;
  border-color: #ef9e3b;
}

但是Vuetify中有一个“.warning”类覆盖了它，请参见屏幕截图

---

我想知道是否有人能解释一下这里使用的是什么技术。在这种情况下，如何正确地将消息背景设置为“蓝紫色”？

这里的问题是您的第二个类，它告诉浏览器将背景设置为黄色作为背景！每个属性末尾的重要标记！重要提示：指示浏览器覆盖与类重叠的任何其他样式。您需要：

A） 从黄色样式中删除重要样式，并将其应用于紫色样式

B） 一起删除黄色样式

选项A看起来更“合乎逻辑”，但它取决于您的工作环境以及您的代码礼仪如何应用于您的项目。我更喜欢保持一切简单，只是删除侵入性的css，尽量少用！在web项目中很重要

有关的更多信息！重要实用程序访问此有用的博客帖子：

---

希望这有帮助。

！重要信息

与内联样式类似，请尝试

.warning.flash\u消息{background:#color！important；..

这些样式具有

！important

，这意味着它们将覆盖任何其他样式。具有

！important

的CSS规则将覆盖任何其他CSS规则，包括您刚刚编写的规则。您需要删除

警告
类才能使您自己的规则生效。
！important
i这是CSS的一个“功能”。请搜索它的用法和意图。我不知道要将您重定向到哪一个副本；这里可以应用两个主要的CSS规则：使用
！important
，或者如果文档中一个规则接一个，它会覆盖第一个规则（根据每个规则的声明位置，仅删除
！important
是不够的）