理解层叠样式表中的层叠机制，精准掌握元素样式

问题：

在写CSS时，有时候会遇到浏览器中显示的样式和本身的预期不符合的状况，这是由于没有理解CSS的层叠机制。
例如文档中有一个p元素,用内联样式为他设置了颜色：

<p class="date" style="color:'#999'">2016年10月20日</p>

在CSS中又用不一样的方式给他指定了颜色：

p {
    color: #000;
  }
.date {
    color: #FFF;
  }

这三个规则都要控制p元素的颜色，而p元素确定只能有一种颜色，那么他会选择哪种呢？

层叠：

层叠就是用来处理这种冲突的一种机制。
他有三大法宝来帮助他完成这个任务：重要度、特殊性、前后顺序。

一.重要度

首先决定使用规则的是重要度，层叠采用的重要度次序（序号越小越重要）：

1.标有！important的用户样式
2.标有！important的做者样式
3.做者样式
4.用户样式
5.浏览器/用户代理应用的样式

重要度更高的规则会覆盖重要度较低的规则。

2、特殊性

那若是重要度相同呢？像上面的例子那样，都是普通的做者样式，他会怎么处理呢？
这时候就要用到另一个概念，特殊性。更特殊的规则会成为优胜方。
与样式来源不一样，CSS选择器多种多样，而且能够叠加使用，添加样式的方法也不少（内联，外部引用，继承）。因此，为了更好的衡量一个规则的特殊性，层叠机制为每一个选择器和方法都分配了一个数值：

行内样式：1000
ID选择器：100
类、伪类、属性选择器：10
类型选择器、伪元素选择器：1
继承：0

每一个规则的特殊性就是他包含的选择器和方式对应的值之和。因此在上面的例子中，p元素的颜色会是 #999.

无论规则多么复杂，这个法宝都能胜任。
例如：

<div id="calendar">
    <div class="date">
        <p>2016年10月20日</p>
        <p id="time">13:20:00</p>
    </div>
</div>

若是CSS中是这样写的，表示时间的p元素的颜色会是#000，由于‘#calendar p’的特殊性为100+1=101，而‘#time’的特殊性为100，虽然‘#time’离目标元素更近，但这并非评判标准。

#calendar p{
    color: #000;
}
#time {
    color: #FFF;
}

第二个规则若是换成

.date #time {
    color: #FFF;
}

"13:20:00"的颜色会是#FFF，由于‘.date #time’的特殊性为10+100=110.

3、前后顺序

那么若是换成这样呢？

#calendar p{
    color: #000;
}
p#time {
    color: #FFF;
}

这两个规则的特殊性相同了。这个时候就要用到第三个法宝，前后顺序。
由于浏览器解析CSS文档时是自上而下的，因此当前两个法宝都没法分清胜负时，靠后面的规则会取胜，因此它的颜色会是#FFF

总结：

有了这三个法宝，层叠机制就能够处理一切冲突了。清楚地理解了他这三大法宝，咱们就能精准的预测出每一个元素在浏览器中的样式了。

附上一个用于测试的小连接：
https://jsfiddle.net/mamengyi...

参考：《精通CSS》