为什么一个CSS类覆盖其他类？

Question

我正在使用Vuetify和vue-flash-message的Vue.js项目中工作。我正在尝试通过编辑其样式将警告消息背景设置为“ blueviolet”：

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

但是Vuetify中有一个'.warning'类可以覆盖它，请参见屏幕快照。

我想知道是否有人可以解释这里使用了什么技术。在这种情况下，使消息背景“ blueviolet”正确的方法是什么？

Answer 1

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

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

B）一起删除黄色样式。

选项A看起来更“逻辑”，但它取决于您所处的环境以及代码礼节如何应用于您的项目。我更喜欢使一切保持简单，只删除侵入性CSS并尝试在Web项目中使用较少的！important。

有关！important实用程序的更多信息，请访问以下有用的博客文章：!Important Utility information

希望这会有所帮助。