不管怎样，无论问题看上去多抽象，多难懂，都要继续努力！你的努力不会白费。
继承 是从一个元素向其后代元素传递属性值所采用的机制。
1. 特殊性
如果遇到下面这种 css ：
h2.grape { color : pink; }
h2 { color: silver }
这两种规则都指向一个元素，您觉得哪种规则会胜出？
当然是第一种，即 h2.grape ，为什么呢？
因为每个选择器的特殊性。浏览器会根据不同规则计算出其特殊性，特殊性最高的规则将会胜出。
那么，这种特殊性怎么计算呢？？
选择器的特殊性，是由选择器本身的组件确定。特殊性表述为4个部分，即：0，0，0，0
具体的特殊属性如下：
(1) 对于选择器中给定的各个 ID 属性值， 加 0，1，0，0；
(2) 对于选择器中给定的各个类属性值、属性选择或伪类，加0，0，1，0；
(3) 对于选择器中给定的各个元素和伪元素，加0，0，0，1；
(4) 结合符和通配选择器对特殊性没有任何贡献。
例如：
h1 { color: pink;} 其特殊性为：0,0,0,1;
body h1{ 0,0,0,2 }
再结合文章最前面那个例子，为啥h2.grape会胜出h2呢？
h2.grape 的特殊性为： { 0,0,1,1 }
h2的特殊性为：{ 0,0,0,1 }
所以 h2.grape 会胜出。
注意，上面的特殊性值是从左向右排列的。所以，特殊性值 1，0，0，0 大于以0开头的所有特殊值，而不论后面的数是啥。
所以，0，1，0，1 比 0，0，1，7 高。
2. 声明和特殊性
3. 通配选择器的特殊性
通配选择器对一个选择器的特殊性没有贡献。
同样，前面所展示那样，div>p, h2 + p, * 中的>、+、* 对于提高特殊性没有帮助。
4. ID和属性选择器的特殊性
html > body table tr[id="totals"] td ul > li { color: maroon }; // 0,0,1,7
li#answer { color: navy } //0,1,0,1
可以看出， li#answer 的特殊性更高，会胜出。
5. 内联样式特殊性
可能，通过上面你会发现，为什么一直都是 0,0,1,7 或者 0,1,0,1 ？？
为什么第一位数一直是0？？
答案是：
因为第一个 0 是为内联样式声明保留的，它比其他所有声明的特殊性都高。
比如：
h1#meadow { color:red }. // 0,1,0,1
<h1 id="meadow" style ="color:green;"> the meadow party </h1> // 1, 0 ,0 ,0
所以，会应用内联中的样式。
6. 重要性
有时候，某个声明可能非常重要，超过了所有其他声明，则可以使用 !important
<h1 class="pink" id="aaa" style="color:red;">Snapshots</h1>
h2{
color: pink !important;
}
pink 将会胜出
.pink{
color: pink !important;
}
#aaa{
color: #fff !important;
}
fff 会胜出
7. 继承
基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。
继承的值没有特殊性。
8. 层叠
我们来思考一个问题：如果特殊性相等的两个规则同时应用到同一个元素会怎么样呢？？浏览器如何解决这个冲突？
答案：按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它的权重就会越大。
比如：
h1{ color: red;}
h1{ color: pink;}
由于pink后出现，它的权重高，所以它会胜出。
(1) 按权重和来源排序
权重由大到小顺序依次是：
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户代理声明
(2) 按特殊性排序
p#bright { color:red; } // 0,1,0,1
p{ color: yellow;} //0,0,0,1
所以 red 胜出
(3) 按顺序排列
如果两个规则的权重、来源和特殊性完全相同，那么，在样式表中后出现的一个将会胜出。
LVHA：
:link { color: blue;}
:visited { color: purple;}
:hover { color: red;}
:active { color: orange;}
