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

问题：

在写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.浏览器/用户代理应用的样式

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

二、特殊性

那如果重要度相同呢？像上面的例子那样，都是普通的作者样式，他会怎么处理呢？
这时候就要用到另外一个概念，特殊性。更特殊的规则会成为优胜方。
与样式来源不同，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.

三、先后顺序

那么如果换成这样呢？

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

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

总结：

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

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

参考：《精通CSS》