如何合并冲突的类？

Question

我有两种冲突的风格：

每个样式都在组件上添加图标。

如何一次添加2个图标。

P.S。

现在我有以下css：

.term-list .jp-container ul li.not-moderated
{
    background: #ffb2b2  url(../images/not-pas.png) no-repeat 360px center;
}
.not-active-terminal
{
    background:   url(../images/messagebox_warning.png) no-repeat 250px bottom !important;
}
.not-active-terminal.not-moderated{
     background: url(../images/messagebox_warning.png) no-repeat 250px bottom,
     url(../images/not-pas.png) no-repeat 360px center,
     #ffb2b2;
 }

单独not-moderated和not-active-terminal工作正常，但两者都不行：

...
<li id="terminal100" class="not-active-terminal not-moderated">
...

Answer 1

当一个属性被定义两次时，CSS中的默认行为是覆盖其中一个声明（特殊性较小的声明，如果特殊性等于CSS样式顺序中的第一个声明被覆盖）。
这是一个非常需要的行为:)否则我们无法覆盖或取消设置或重置已定义的内容。

使用一个属性定义多个背景，因此您需要将每个背景写入一个值。

.case1 {
  background: red url(image1.png) left top no-repeat;
}
.case2 {
  background: url(image2.png) right bottom no-repeat;
}
.case1.case2 {
  background: url(image2.png) right bottom no-repeat,
    url(image1.png) left top no-repeat,
    red;
}

一段时间之后很难跟踪，但仍然比新的CSS属性background2，background3等没有限制的东西更好。然后在框架或重置CSS中，您必须覆盖未知数量的属性“以防万一”。

Using CSS multiple backgrounds（MDN）

顺序很重要：首先声明的是在其他人之上，你可能在最后一个逗号之后有一个颜色作为最后一部分（不透明的颜色会隐藏它之后的所有内容）。您可以拥有多个背景图像属性，并在单独的属性中定义多个背景重复，背景位置等，如果它更合适

Answer 2

查看更新后的CSS，我猜您需要：

a）从!important规则集中的背景值中删除.not-active-terminal，或者......

b）将!important添加到.not-active-terminal.not-moderated规则集中的背景值。

使用!important定义的属性总是被视为具有比没有它的那些更具特异性的属性，因此在我看来，多类规则集的背景值将被覆盖先前的规则集。