级联

有时候，有多个相同的css规则可以被应用于同一个元素。此时浏览器需要使用级联算法确定最后使用哪一个css规则进行页面渲染。

css是级联样式表（Cascading Stylesheets）。级联是解决当多个css规则被同时应用于一个html元素时产生的冲突的一种算法。正因为级联，下面的按钮才会被渲染成蓝色：

<style>
    button {
        color: red
    }
    button {
        color: blue;
    }
<style>

...

<button>This is blue</button>

理解级联的目的，就是为了理解浏览器是如何解决此类冲突的。级联算法分为以下四个模块：

位置和出现的顺序：css规则出现的顺序。
特征性（具体性 Specificity）：确定css选择器具有最高匹配权的算法。
来源： css在何时何处生成。它是否是一个浏览器样式或者是浏览器插件添加的样式，又或者是你写的css代码。
重要性：一些css规则具有更高的重要性，特别是包含!important值的规则。

一.位置和出现的顺序

级联规则在解决css规则冲突时，会考虑css规则出现的位置和顺序。

一般一个页面可能包含多种来源不同的css样式。例如<link>标签引入的css文件、<style>标签内部的样式或者是定义在元素style属性中。

但是只需要记住一点，位置越靠后的样式一般具有更高的重要性。假设在html顶部有一个<link>样式，html页面底部也有一个<link>样式，那么底部的<link>样式会在css规则冲突中胜出，因为位置比较靠后。这一点对<style>标签内的样式也适用，但是不适用于元素的style属性，style属性的重要性会比<link>和<style>标签高。

下面的demo中，按钮显示红色。

前面说过，这个规则不适用于内联样式，内联样式就是通过元素style属性定义的样式。内联样式会覆盖所有其他的css，无论这些css出现的位置和顺序，除非css规则的声明值定义为!important，!important比内联样式的重要性更高。

这个规则同样适用于同一个规则块内，同规则的重复设置。下面的代码，背景色将会显示为purple：

.ele {
    background: green;
    background: purple;
}

二.特征性（具体性 Specificity）

特征性是一种决定哪个css选择器最具体的算法。这里的最具体的意思，你可以看成哪个css权重最高的意思，选择器权重最高的css规则，在规则冲突中将会胜出。

有了特征性算法，即使有多个不同的css规则具有不同的选择器产生了规则冲突，浏览器也可以决定最后使用哪个css规则去渲染页面。

关于特征性，我将在下一节内容进行讲解。你可以学到特征性是如何计算的。

现在你只需要知道，类选择器的特征性高于类型选择器（标签选择器），ID选择器特征性高于类选择器。

因为ID选择器的特征性比较高，所以下面的按钮将会显示为green。

button {
    color: blue;
}

.button {
    color: red;
}

#button {
    color: green;
}

...

<button id="button" class="button">This is a green button</button>

关于特征性，还需要说明的是，特征性可以累加的。如果一个选择器很复杂，因为权重的累加效果，它的最终权重往往会比较高。例如a.my-class.another-class[href]:hover,这样一个选择器，它的css样式一般都会被应用于页面，因为你很难写出比它权重还高的样式了，所以出于这个原因，建议大家在写css时，尽量避免写这种复杂的规则，保持选择器简洁是一个比较好的习惯。

三.来源

css来自不同的地方，也会影响是否会在规则冲突中胜出。关于样式的来源的特征性从低到高如下：

用户代理样式：也就是浏览器默认样式。
本地用户样式：一般来源于系统设定，也可以是浏览器插件设定的样式。某些浏览器插件允许用户定义自己的浏览器页面样式。
开发者定义的css规则：指网页开发者写下的css样式。
标记为!important的css: 网页开发者写的含!important标记的css样式。
含!important的本地用户样式：与2来源相同，不过这个css含有!important标记。
含!important的用户代理样式：与1来源相同，不过这个css含有!important标记。

四.重要性

并不是所有的css规则都和其他css按照同样方式计算特征性。

不同种类的css规则重要性从低到高依次如下：

普通规则：例如font-size、background或者color。
animation规则。
!important规则。
transition规则。

所以当某些动画规则或者变换规则激活时，它会取代普通规则，进行渲染页面。

附：参考资料

谷歌learn css: The cascade

MDN: Cascade and inheritance

（完）