第 53 期(W3C标准-CSS-语法)：样式的顺序

[wingmeng]

有如下代码，请问 HTML 代码中“文本”最终渲染出的颜色分别是？

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

<div class="red blue">文本</div>
<div class="blue red">文本</div>

---

答案

两个都是蓝色

Why? CSS 的层叠规则里有一条叫做“后来居上原则”，即两个相同权值的样式，如存在相同的声明属性，则后者获胜。
本题的 CSS 样式里，.blue 和 .red 权值相同，且都声明了 color 属性，但 .blue 在样式表中位于 .red 后面的位置，所以当 HTML 中的同一标签同时引用这两个类名时，以 .blue 的 color 声明为准，和 HTML 中 className 的先后顺序无关。