给定这些类，这些div将在CSS中显示什么颜色？为什么？

Question

考虑到这些类，哪种颜色将应用于第一和第二格？

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

<div class="red blue">Hello</div>
<div class="blue red">World</div>

Answer 1

您将类放入HTML的顺序之间没有区别，声明的样式也有区别。 blue是在red之后声明的，因此样式被覆盖。

Answer 2

CSS代表级联样式表。

级联部分的意思是：

  

将（某物）传递给其他人。

     

级联名称来自指定的优先级方案，如果有多个规则与特定元素匹配，则确定采用哪种样式规则。这种级联优先级方案是可以预测的。

基本上，这意味着，如果有两种针对同一元素的color样式，则最后一种将被应用。在您上面的示例中，哪个是blue。