css - 根据类名覆盖 css 元素

Question

我的代码中的 CSS 标记有问题。 我正在构建一个控件，我的计划是向它添加一个标准类，以便它具有固定的布局，并在其后面添加任何用户定义的 css 类，以个性化该控件。但在我的测试过程中，我发现了一个我无法解决的问题。

当我有这样的元素时

<div class="test1 test2"></div>

以及另一个样式表文件中的底层代码。

.test1
{
   width: 200px;
   height: 200px;
   background-color: red;
}
.test2
{
   background-color: yellow;
}

那么我先放test1还是test2都没关系。 div 总是黄色的，因为 test1 是最后写在 css 文件上的。 如果我在 css 文件本身中将 test2 替换为 test1，则 div 将始终为红色。

我怎样才能覆盖背景颜色，以防根据其在 className 本身中写入的顺序进行第二次添加？

我还想注意我不想强制用户使用 !important 标签。我已经知道了，是的，它工作正常，但我不需要它。欢迎就如何解决此问题提出任何想法。我愿意接受其他选择

Answer 1

你可以这样做 .test2当与 .test1 组合时变黄

.test1.test2{
  background-color: yellow;
}

更好的方法是完全不这样工作。阅读 this article反而。它解释了一种名为 BEM 的 CSS 技术。 ( block 、元素、修饰符)非常棒。尝试修改现有样式时，它看起来像:

.test{
  width: 200px;
  height: 200px;
  background-color: red;
}
.test--warning{
  background-color: yellow;
}

和你的div看起来像<div class="test test--warning">