【css要点总结】003 级联
级联
文章中的demo无法实时预览，请移步至003 级联 获得更好的阅读体验。
有时候，有多个相同的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中，按钮显示红色。
See the Pen 003 Box_Model 1 by Pengfei Wang ( @AhCola) on CodePen.前面说过，这个规则不适用于内联样式，内联样式就是通过元素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
（完）