为什么一个 CSS 类会覆盖其他类？ [关闭]答案

【问题标题】：Why one CSS class overrides other? [closed]为什么一个 CSS 类会覆盖其他类？ [关闭]
【发布时间】：2019-03-06 17:14:37
【问题描述】：

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

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

但是 Vuetify 中有一个 '.warning' 类覆盖它，请参阅屏幕截图。

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

【问题讨论】：

!important 喜欢内联样式，试试.warning.flash__message { background: #color !important; ...
样式有!important，这意味着它们将覆盖任何其他样式。 medium.com/markuptips/css-is-important-960a9921e454
带有!important 的CSS 规则将覆盖任何其他CSS 规则，包括您刚刚编写的规则。您需要删除 warning 类才能使您自己的规则生效。
!important 是 CSS 的一个“特性”。请搜索它的用途和意图。
我不知道要将您重定向到哪个副本； 2 个主要的 CSS 规则可以在这里应用：!important 的使用，或者如果一个规则在文档中一个接一个出现，它会覆盖第一个（取决于你的每个规则的声明位置，删除 !important 不能够了）

标签： css vue.js

【解决方案1】：

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

A) 从黄色样式中删除重要的样式并将它们应用于紫色

B) 一起删除黄色样式。

选项 A 看起来更“合乎逻辑”，但这取决于您的工作环境以及您的代码礼仪如何应用于您的项目。我更喜欢保持一切简单，只需删除侵入性 css 并尝试在 Web 项目中使用更少的 !importants。

有关 !important 实用程序的更多信息，请访问这篇有用的博文：!Important Utility information

希望这会有所帮助。

【讨论】：