css样式多个class设置color时，后面的为什么不能覆盖前面的？

Question

css样式多个class设置color时，后面的为什么不能覆盖前面的？

.a1 {color: red};
.a2 {color: black};
.a3 {color: blue};
 
<span class="a3 a1 a2">文字</span>
最终效果是红色???

Answer 1

html 元素的 class 的值不分前后顺序, 同优先级哪个先有哪个就先生效, 后面的直接会忽略掉. 大意了, 你语法有错, 哈哈哈, 多了分号. 删掉分号, 后面的会覆盖前面的.

而如下样式里, 同一个选择器里, 相同的有效的设置才会覆盖前面的.

.a2 {
  color: red;
  color: black;
  color: blue; // 这行生效, 有编译工具的话前面两行也会被直接移除
}

Answer 2

把你样式中写的;号去掉试试