HTML中CSS样式的优先级

  css样式的优先级基于它的继承性。在此篇没有提及标签选择器和通配符选择器，但它们的优先级很低，仅高于body！

  并且所介绍的都是单个选择器的优先级，因为组合型的选择器就是单个选择器优先级的累加。

css样式的优先级在本篇中按从低到高的顺序排列，就是目录的顺序

---

CSS中body的样式

我们知道每一个 HTML 页面都有一个 body 元素。

想要证明body元素的存在，将其 background-color 设置为红色。

把以下代码添加到我们的style标签中：

body {
  background-color: red;
}

即使在网页中除style外并没有任何标签，仍然变成了红色，现在我们已经证明，每个HTML页面都有一个body元素，并且它的body元素同样能够应用样式。

记住，你可以像任何其他HTML元素一样对你的body元素应用样式，并且所有其他元素都将继承你的body元素的样式。

body样式的覆盖（class会覆盖body中的样式）

body作为一个顶级父类，一般情况任意的样式都将覆盖它

创建一个h1标签

在body的样式表中加入一个 color:green, 此时h1中的文本变成了绿色

有时你的 HTML 元素会得到多个相互冲突的样式。

例如，你的 h1 元素不能同时为绿色和粉色。

给你的h1添加一个class，pink-text

在style中加入，并设置颜色为粉色

你会发现，h1的颜色变为了粉色

使用class 会覆盖 body 元素的 CSS，这点可以理解为继承中的重写

多个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 的属性。

---

通过ID的样式属性覆盖class类的声明

我们刚刚证明了，浏览器是从上到下读取CSS。这意味着，如果发生冲突，浏览器将使用最后的任何CSS声明。

我们还有其他覆盖 CSS 的方法。你还记得 id 属性吗？

我们来覆盖你的 pink-text 和 blue-text class，并使你的 h1 元素变成橙色，给 h1元素一个id，然后对该id进行样式化。

给你的 h1 元素添加名为 orange-text 的 id 属性。记住，id 样式如下所示：

在你的 h1 元素中保留 blue-text 和 pink-text class。

为你的 style 元素中的 orange-text id 创建一个 CSS 声明。如下例子所示：

#brown-text {    
  color: brown;    
}

注意：你是否将这个css声明在pink-text class之上或之下无关紧要，因为id属性始终是具有更高的优先级。

通过内联样式覆盖class类的声明

我们已经证明了，id 声明都会覆盖 class 声明，不管它在你的 style 元素 CSS 的哪个位置进行声明。

内联样式可以覆盖其他CSS。

使用 in-line style（内联样式）来尝试使我们的 h1 元素变为白色。就是标签内的style属性，
内联样式如下所示：

<h1 style="color: white;">

在你的 h1 元素上保留 blue-text 和 pink-text class。

通过使用Important覆盖所有其他样式

我们刚证明了内联样式将覆盖style 中定义的所有 CSS声明。
可是，有最后一个终极方法来覆盖CSS。但在我们这样做之前，让我们来谈谈你为什么要覆盖CSS。

在许多情况下，将使用CSS库。这些可能会意外覆盖自己的CSS。所以当你绝对需要确定一个元素具有特定的CSS时，可以使用 !important。

让我们回到之前的 pink-text class 声明。请记住，我们的 pink-text class 被后续的 class 声明、id 声明和内联样式覆盖了。

我们来给 pink-text 元素的 color 声明加上关键字 !important，以使 100% 确保你的 h1 元素是粉色的。

举例如下：

color: pink !important;

• 颜色除了使用单词还可以用 hex code（‘#000000’这样的形式），是16进制符号，（提到16进制，我们会发现刚好是作为rgb值的范围（0-255），每两个字符对应rgb中的一个值）
• 或者rgb()函数,rgba()函数
  rgb指红绿蓝，范围在0到255
  a是透明度，范围在0到1