样式优先级计算

1. 概述

层叠（cascade）：是指当一个DOM元素对应的多个样式存在冲突时，浏览器解决冲突的一些规则。它由四个概念组成

特殊性是解决多样式冲突的一个重要的概念，在css中，所有样式声明都有自己选择器，而不同的选择器具有不同的特殊性

根据选择器的不同，一共有5个权重

注意：0特殊性的，相比完全没有特殊性的继承样式，优先级更高

* { color:red;}
h1 {coloe:black;}

<h1>什么<em>颜色</em></h1>

可以通过!important来标志出重要声明，事实上，!important不具备任何特殊性。浏览器会将标识为重要的声明放到一起，相比普通组，重要组中的声明总会胜出。

body h1 {color:red;} /*特殊性权重 = 2*/
h1 {color:orange !important;}/*特殊性权重 = 1*/

由于第二条规则中有!important标志，所以尽管特殊性只有1，仍然胜出。

如果重要组中的声明发送了冲突，就还是要采用计算特殊性的方式来解决

h1#title {color:red !important;}/*特殊性权重 = 101*/
h1.title {color:orange !important;}/*特殊性权重=11*/

则第一条规则会胜出。

由于有些浏览器或者浏览器插件允许用户自己定义样式（称之读者声明），由此就存在开发者创建的声明与用户自定义之间的孰轻孰重的问题。

优先级从高到低：

在综合考虑了前面的所有因素之后，最后的解决冲突的办法就是声明顺序。

一句话：越后声明的优先级越高

h1{color:blue;}
h1{color:red;}

第二条会胜出

<style>
    .a {color:blue;}
    .b {color:red;}
</style>
<p class="b a">123</p>

文字的颜色是：red，注意顺序是值声明顺序，而不是使用顺序。