html - 哪个类将应用于 div，为什么？

Question

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

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

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

标签： htmlcss

Answer 1

原因是因为 CSS 是Cascading，所以规则是根据它们在文件中的位置来应用的。如果您切换.orange到底部，您将拥有两个<div>带有橙色文本的 s，因此类优先级为orange。