引言
css本质上就是声明规则，即在各种条件下，产生我们希望的效果。
但是，如果两条规则冲突时，会选择哪一个规则进行渲染呢？这就是本篇文章要解决的问题。
规则冲突的例子：
<!--html-->
<div class="box" id="box" style="color:red" >我是啥颜色</div>
<!--css-->
#box { color: orange; }
.box { color: blue; }
以上的css产生了冲突，浏览器会把字体渲染成什么颜色呢？答案是“red"，为啥？接着看。
1. 什么是层叠？
层叠就是指：如何解决冲突的一系列规则。规则就是来解决冲突的，例如上述代码一个要让字体为orange,另一个让字体为blue,为了解决类似的声明冲突，css定义了一套简单的优先级规则。大家只要记住了这些优先级顺序，就理解了css层叠。下面我们来学习以下这些优先级规则。
2. 层叠规则
层叠会依次判断三个条件来解决冲突。这三个条件依次为样式表来源、选择器优先级，源码顺序。
1. 规则一：样式表来源优先级
样式表来源主要有两个：
-
用户代理样式表（优先级低）
-
作者样式表（优先级高）
- 内联样式（更高优先级）
- 外联样式
用户代理样式表就是浏览器默认的样式，而作者样式表则是我们自己写的css。
浏览器会优先选择作者样式表渲染页面，作者样式表有两种，即内联样式和外联样式，内联样式的优先级高于外联样式的优先级。所以文章开头的问题在此便可知晓答案。
总结：内联样式 > 外联样式 > 浏览器默认样式。
2. 规则二：选择器优先级
若冲突的规则的样式表的来源都一样，就开始判断选择器的优先级：
ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器
更精确的规则如下：
- 如果选择器的 ID 数量更多，则它会胜出（即它更明确）
- 如果 ID 数量一致，那么拥有最多类的选择器胜出
- 如果以上两次比较都一致，那么拥有最多标签名的选择器胜出
下面看个例子，巩固一下刚才所学的知识，看看谁的优先级更高。
其实可以用一种标记来判断优先级，如下标所示（id选择器个数，类选择器个数，标签选择器个数），标记从左往右比，谁大优先级就越大，相同就继续比下一个。若标记都一样，则看第三条规则。
| 选择器 | ID | 类 | 标签 | 标记 |
|---|---|---|---|---|
| html body header h1 | 0 | 0 | 4 | 0,0,4 |
| body header .page-header h1 | 0 | 1 | 3 | 0,1,3 |
| .page-header .title | 0 | 2 | 0 | 0,2,0 |
| #page-title | 1 | 0 | 0 | 1,0,0 |
总结： ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器
3. 规则三：源码顺序优先级
如果两个声明的来源和优先级相同，则较晚出现的样式的规则声明 胜出。
有的人可能会说这个规则太简单而忽视了它，但是在写代码的时候可能就会因为顺序不对而写错，例如，
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
text-decoration: underline;
}
a:active {
color: red;
}
在上述代码中，如果你的visited和hover的顺序写错，那么在你访问过链接后，hover的效果将会被visited覆盖，就不会产生我们想要的结果。
总结：浏览器遵循三个步骤，即来源、优先级、源码顺序，来解析网页上每个元素的每个属性。如果一个声明在层叠中“胜出” ，则会按照胜出的声明渲染页面。
