判断第一行和第二行的颜色分别是什么？并解释为什么？

Question

html-basic">

<style>
.red {color:red;}
.green {color:green;}
</style>

<div class="red green">第一行：颜色是什么？</div>
<div class="green red">第二行：颜色是什么？</div>

Answer 1

• Answer：两行显示皆为绿色
• Question：为什么都显示为绿色？
• Answer：当应用不同类名相同规则的CSS代码的时候，与标签内的class声明的顺序无关，跟选择器的权重有关，而CSS中规定当同时应用相同规则的时候，取决于在Style标签中声明的顺序，靠下的会取代靠上的，简单理解为就近原则即可。