层叠

层叠本质就是定义了如何合并来自多个源的属性值的算法，简单来说，CSS规则的顺序很重要。当两条同级别的规则应用到一个元素的时候，写在后面的就是实际使用的规则。

当多个相互冲突的CSS声明应用于同一个元素时，CSS层叠算法会根据一定的机制，从最高权重到最低权重的顺序列出：

  • 来源和重要性
  • 选择器权重
  • 出现的顺序
  • 初始和继承属性（默认值）

来源

  1. 用户代理样式表：浏览器的基本的样式表，用于给所有网页设置默认样式；
  2. 用户样式表：网页的作者可以定义文档的样式。大多数情况下此类型样式表会定义网站的主题；
  3. 浏览器的用户使用自定义样式表定制使用体验。

计算规则：相互从图的声明按以下顺序适用，后一种声明将覆盖前一种声明。

  1. 用户代理样式表中的声明（浏览器的默认样式）
  2. 用户样式表中的常规声明（用户设置的自定义样式，就如同我们的reset.css）
  3. 作者样式表中的常规声明（开发人员设置的样式）
  4. 作者样式表中的!important声明
  5. 用户样式表中的!important声明

!important > 内联style > #id > .class > 标签