Css规则应用两次 - 覆盖！重要

Question

所以我有这两个类，它们在单独的css文件中

.conditional { background-color: #ffd0d0 !important; }

 span.fieldz { background-color: #FFFF00; height: auto !important; width: auto !important; }

即使.conditional声明具有!important声明，<span class='conditional' contenteditable='true'> <span class='fieldsz' contenteditable='false'>[Usesles Text]</span> </span> 的背景颜色也未应用。 HTML看起来正确

!important

当我检查css时，我看到每个类都应用了两次规则。

当我取消选中fieldz类（两者）时，只有应用了!important的背景。这如何超越.css声明？我还检查了我是否按照建议here in this SO post where the class is applied twice.两次引用了.css但是我只引用了{{1}}个文件中的每一个。

Answer 1

我不知道检查员的双重条目来自哪里，但颜色的行为是正常的。
如果您将!important应用于元素的属性，则它不会覆盖另一个元素上的相同属性。
因此，.conditional范围为粉红色，.fieldz范围为黄色，这就是您所看到的。由于.fieldz位于.conditional内，因此会在其上方绘制。