时间戳

首页 > 解决方案 > 为什么一个 CSS 类会覆盖其他类？

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

问题描述

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

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

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

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

标签： cssvue.js

解决方案

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

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

B）一起删除黄色样式。

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

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

希望这可以帮助。

推荐阅读