前言
- 介绍一下CSS中的层叠规则
在《 CSS学习（7）CSS属性计算过程》中，我们介绍了每一个元素都有所有的属性，每一个属性都会通过一系列计算过程得到最终的值，共有以下步骤：
- 确定声明值
- 层叠冲突
- 使用继承
- 使用默认值
其中第二步和第三步中的层叠和继承还有一些需要了解的知识点。
层叠规则
CSS是 Cascading Style Sheets的缩写，翻译成中文就是层叠样式表，这暗示层叠(cascade)的概念是非常重要的。
什么选择器在层叠中胜出取决于三个因素(这些都是按重量级顺序排列的，前面的会否决后面的):
- 重要性(Importance)
- 专用性(Specificity)
- 源代码次序(Source order)
重要性
在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则: !important。
但是，建议你千万不要使用它，除非你绝对必须使用它。您可能不得不使用它的一种情况是，当您在修改某个组件样式时，你不能编辑该组件核心的CSS模块，例如修改组件库样式，又或者你确实想要重写一种不能以其他方式覆盖的样式。
如果你能避免的话，不要使用它。由于!important改变了层叠正常工作的方式，因此调试CSS问题，尤其是在大型样式表中，会变得非常困难。
专用性
专用性基本上是衡量选择器的具体程度的一种方法，主要是指它能匹配多少元素。
元素选择器具有很低的专用性。类选择器具有更高的专用性，所以能战胜元素选择器。ID选择器有甚至更高的专 用性，所以将战胜类选择器，战胜ID选择器的方法则是style中的样式或者!important。
一个选择器具有的专用性的量可以用四种不同的值(或组件)来衡量的，它们可以被认为是千位、百位、十位和个 位，在四个列中的四个简单数字：
- 千位：如果声明是在style属性中该列加1分(这样的声明没有选择器器，所以它们的专用性总是1000)否则为0。
- 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
- 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
- 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。
注：通用选择器(*)，复合选择器(+、>、一、空格)和否定写伪类(:not)在专用性中无影响。
{} /* a=0 b=0 c=0 d=0 -> 选择器权重 = 0,0,0,0 * /
li {} /* a=0 b=0 c=0 d=1 -> 选择器权重 = 0,0,0,1 * /
li:first-line {} /* a=0 b=0 c=0 d=2 -> 选择器权重 = 0,0,0,2 * /
ul li {} /* a=0 b=0 c=0 d=2 -> 选择器权重 = 0,0,0,2 * /
ul ol+li {} /* a=0 b=0 c=0 d=3 -> 选择器权重 = 0,0,0,3 */
h1 + [rel=up] {} /* a=0 b=0 c=1 d=1 -> 选择器权重 = 0,0,1,1 * /
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 选择器权重 = 0,0,1,3 * /
li.red.level {} /* a=0 b=0 c=2 d=1 -> 选择器权重 = 0,0,2,1 * /
#x34y {} /* a=0 b=1 c=0 d=0 -> 选择器权重 = 0,1,0,0 * /
style="" /* a=1 b=0 c=0 d=0 -> 选择器权重 = 1,0,0,0 */
源代码次序
如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜，也就是说，选择哪一个选择器取决于源码顺序。
谁写在后面就使用谁。
继承规则
所谓继承，就是应用于某个元素的一些属性值（例如color）将由该元素的子元素继承，而有些则不会。
CSS为处理继承提供了四种特殊的通用属性值：
inherit：该值将应用到选定元素的属性值设置为与其父元素一样。（继承值）
initial：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为inherit。（浏览器默认值）
unset：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像inherit，否则就是表现得像initial。
revert：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性(如果被设置)，否则属性值被设置成用户代理的默认样式。
注：initial和unset不被IE支持。
继承的就近原则
由于属性值是由继承而来，所以属性值会继承离自己近的那个元素的属性。例如：
<div class="one">
<div class="two">
<p>test</p>
</div>
</div>
.one {
color: red;
}
.two {
color: green;
}
two比one更加接近p，所以最终采用的是two的color值。
总结
- 介绍一下CSS中的层叠规则
CSS中当属性值发生冲突时，通过层叠规则来计算出最终的属性值，层叠规则可以分为3块：
- 重要性(Importance)：!important设置该条属性值最重要，但是一般不推荐使用
- 专用性(Specificity)：专用性主要是指它能匹配多少元素，匹配得起成少专用性越高
- 源代码次序(Source order)：在重要性和专用性都一致的情况下，属性值取决于源代码的先后顺序。
