哪个类别适用于div，为什么？

Question

我遇到了一个有趣的代码。如果我们运行下面的代码片段，则将绿色类应用于两个div。谁能解释为什么？

.orange {
    color: orange;
}
.green {
    color: green;
}

<div class="orange green">Div 1</div>
<div class="green orange">Div 2</div>   

Answer 1

原因是因为CSS是 Cascading ，所以根据文件的向下位置应用规则。如果将.orange切换到底部，则两个<div>的文本均为橙色，因此该类的优先级为orange。

Answer 2

但是，您在html代码中混淆了类名，但是最后在CSS文件中编写的代码（类）将首先执行。由于CSS是级联的，因此它会覆盖之前定义的内容。