CSS的样式优先级问题

上代码：

 1 <style>
 2   body {
 3     background-color: black;
 4     font-family: monospace;
 5     color: green;
 6   }
 7   .pink-text {
 8     color: pink;
 9   }
10   .blue-text {
11     color: blue;
12   }
13 </style>
14 <h1 class="blue-text pink-text">Hello World!</h1>

显示结果：

在FreeCamp上的原文解释是这样的：

Note: It doesn't matter which order the classes are listed in the HTML element.

However, the order of the class declarations in the <style> section is what is important. The second declaration will always take precedence over the first. Because .blue-text is declared second, it overrides the attributes of .pink-text

简译过来就是：在HTML元素中这个class的顺序并不决定谁有显示的优先级，真正重要的是在style区域中声明的顺序，后一项声明总是比前一项声明占据更高的优先级，所以这就是为什么结果是蓝色的原因。

觉得这个还是和平常程序员思维逻辑稍不同的地方，记录下来。