javascript - CSS类应用顺序错误

我有一个单独使用时正常工作的代码。

<div class="red green blue"> </div>

现在red的属性首先被应用，然后被green覆盖，然后被blue覆盖。最后，div是blue。
但是，当我通过angular include在主应用程序中加载引用HTML文件的相同内容时，CSS的顺序就会颠倒。
现在blue首先被green覆盖，然后被red覆盖。现在div是red
这破坏了代码逻辑。
如果有人有主意，可能的原因是什么。

最佳答案

现在red的属性首先被应用，然后被green覆盖，然后被blue覆盖
CSS不是这样工作的。类列表中类的顺序与这些类应用于元素的规则的优先级无关。
CSS规则由应用
规则的特殊性
CSS（而不是类列表）中规则相对于具有相同特殊性的其他规则的顺序（例如，稍后的规则获胜）
规则是否有!important标志
更多信息请参见the specification。
例子：

.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}

<div class="red green blue">red green blue</div>
<div class="blue green red">blue green red</div>

注意，两个div都有蓝色文本（由blue指定的颜色），即使第一个div有red green blue而第二个div有blue green red，因为这三个规则都有相同的特殊性，.blue规则是CSS中的最后一个规则，并且没有一个标记为!important。
相反，让我们将.green规则变得更加具体：

.red {
  color: red;
}
div.green {
  color: green;
}
.blue {
  color: blue;
}

<div class="red green blue">red green blue</div>
<div class="blue green red">blue green red</div>

注意div现在是绿色的而不是蓝色的，因为div.green比.blue更具体，所以div.green规则优先于.blue规则，即使.blue在CSS后面。

关于javascript - CSS类应用顺序错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42548555/