覆盖依赖于className的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[class*=test2]
{
  ...
}

这应该使类test2覆盖只有类名选择器的其他类。

（抱歉，这部分不正确）

如果你想降低 test1的优先级，你可以这样做：

[class*=test1]
{
  ...
}

（我还没有对此进行测试，您可能需要将其命名为*[class*=test1]）

Answer 2

与.test2结合使用时，.test1变为黄色

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

更好的方法就是不要像这样工作。读取this article代替。它解释了一种称为BEM（块，元素，修饰符）的CSS技术，它非常棒。尝试修改现有样式时，它看起来像：

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

，您的div将显示为<div class="test test--warning">