CSS（层叠样式表）是浏览器对多个样式来源进行叠加，最终确定结果的过程。

由于样式的来源不同，浏览器在加载样式时，需要计算出最终的样式值，这样才能显示出正确的界面效果——浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。

CSS样式优先级按照就近原则（离被设置元素越近优先级别越高）确定。

参考CSS的三种引入方式：外部样式、内部样式和行内样式

https://kuaikan.ink/thread-765.htm

CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

https://kuaikan.ink/thread-764.htm

下面是举例说明，如下面代码。第一个引自外部式、第二个嵌入式：

p{
     color: red; /*字体颜色为红色*/
     font-weight: bold; /*字体粗细为加粗*/
} /*来自样式表文件*/

p{
     color: blue; /*字体颜色为蓝色*/
} /*来自<style>标签*/

不同来源的两个样式，第一个样式设置了font-weight，第二个没有，浏览器会把它叠加在一起，即浏览器会把各个零散的整合成一个整体。第一个样式color: red;，第二个样式color: blue;，根据就近原则，浏览器会让后者覆盖前者，最终结果还是color: blue;。最后显示出来的代码：

p{
     color: blue; /*字体颜色为蓝色*/
     font-weight: bold; /*字体粗细为加粗*/
}

覆盖的默认规则是后者覆盖前者，但是有一个特殊情况——!important。如下面代码：

span{
     color: red !important; /*字体颜色优先显示为红色*/
} /*来自样式表*/
span{
     color: blue;
} /*来自<style>标签*/

最终显示出来的代码如下：

span{
     color: red; /*字体颜色显示为红色*/
}

虽然color: blue;是后来者，但是它没有居上，因为前者color: red;跟着!important。因为!important(英文翻译：重要的)的作用是提高指定CSS样式规则的应用优先权。