Override Styles in Subsequent CSS

说明：

我们的 "pink-text" class 覆盖了 body 元素的 CSS 声明！

我们刚刚证明了我们的 class 会覆盖 body 元素的 CSS，那么下一个合乎情理的问题就是，我们怎样才能覆盖我们的 pink-text class 呢？

再创建一个把元素设置为蓝色的名为 blue-text 的 CSS class，确保它在你的 pink-text class 声明的下面。

除了 pink-text class 之外，再把 blue-text class 应用到你的 h1 元素，让我们来看看谁会赢。

如下例，通过用空格分隔多个 class 属性，可对 HTML 元素应用多个 class 属性：

class="class1 class2"

注意：在 HTML 中这些 class 如何排序是无所谓的。

然而，在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明，它覆盖了 .pink-text 属性。

原始代码：

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
</style>
<h1 class="pink-text">Hello World!</h1>

调试代码：

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text{
    color: blue
  }
</style>
<h1 class="pink-text blue-text">Hello World!</h1>