前言
h1 {color:red;} 简单明确，可如果是：
h1 {color:red;}
h1 {color:black;}
body h1 {color:green;}
就显得略微复杂了。
为什么，一个 h1 标签可以有这么多种颜色？
不！h1 标签有且只有一种颜色。
摘要
每一个合法的文档（html）都会生成一个结构树，通过这一点就可以根据元素创建选择器来选择元素。这是 CSS 继承的核心。
用户代理通过考虑继承、声明的特殊性、以及声明本身的来源，来确定一个元素应用哪些值。这个过程被称为层叠。
特殊性
特殊性由选择器本身的组件决定。如果有两个以上冲突的声明，那么用户代理会计算声明的特殊性，特殊性最高的声明胜出。
特殊性可以分为4个，如 0，0，0，0。
各个 ID 属性值，加 0，1，0，0。
各个类属性值，属性选择或伪类，加 0，0，1，0。
各个元素，伪类元素，加 0，0，0，1。
h1 {color:red;} /* 0，0，0，1 */
body h1 {color:green;} /* 0，0，0，2 胜出 */
h2.grape {color:red;} /* 0，0，1，1 胜出 */
h2 {color:silver;} /* 0，0，0，1 */
html > body table tr[id=”totals”] td ul > li {color:maroon;} /* 0，0，1，7 */
li#answer {color: navy;} /* 0，1，0，1 胜出*/
内联声明的特殊性都是：1，0，0，0。比其他声明的特殊性都高。
继承
基于继承，样式不仅应用到指定的元素，还会应用到它的后代。
有些元素不能继承，例如：border、大多数框架模型属性（外边距、内边距、背景和边框）
继承没有特殊性
继承 BUG：
body {font-size: 0.8em;}
body, table, th, td {font-size:0.8em;}
由于浏览器本身在继承方面存在问题，使用第二个样式比较可能得到想要的结果。
层叠
层叠的规则：
- 找出所有相关的规则。
- 按显式权重对应用到该元素的所有声明排序。标识 !important 的规则的权重高于没有 !important 标识的规则。按来源对应用到给定元素的所有声明排序。
- 按特殊性对应用到给定元素的声明排序。
- 按出现顺序对应用到给定元素的声明排序。
按权重和来源排序
标识有 !important 的规则的权重要高于没有 !important 的规则。
创作人员，代表设计、开发人员。
读者，代表用户。读者样式，即设置自定义的浏览样式。
用户代理，代表浏览器默认设置。
那么权重由大到小的顺序依次为：
- 读者的重要声明（即 !important)
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户代理声明
按特殊性排序
较高的特殊性强于较低的特殊性
按顺序排序
如果规则的权重、来源和特殊性完全相同，那么样式表中后出现的一个会胜出。
体现在 link-visited-hover-active(LVHA) 的顺序声明链接样式。