HTML中CSS样式的优先级
css样式的优先级基于它的继承性。在此篇没有提及标签选择器和通配符选择器，但它们的优先级很低，仅高于body！
并且所介绍的都是单个选择器的优先级，因为组合型的选择器就是单个选择器优先级的累加。
css样式的优先级在本篇中按从低到高的顺序排列，就是目录的顺序
-
- CSS中body的样式
- body样式的覆盖（class会覆盖body中的样式）
- 多个class处理样式覆盖
- 通过ID的样式属性覆盖class类的声明
-
- 通过内联样式覆盖class类的声明
- 通过使用Important覆盖所有其他样式
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 元素上保留 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