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 属性。

Run tests (ctrl + enter)