CSS规则层叠时的优先级算法
2020-10-23 18:36:09
供稿：网友
inline style
embeded style
external style
user style
inline style是丑陋的，它们穿梭在HTML文档中，与HTML元素扭成一团，给Web前端开发人员造成了许多麻烦。它们往往以这样的面目出现：
<p style="color:red;">This is a paragraph.</p>
embeded style比inline style绅士一些，它们也寄宿在HTML文档中，但是它们不屑于与HTML元素扭成一团。它们往往在 <style> 元素中出现：
<style type="text/css" media="screen">
p{
color : red;
}
</style>
external style是个贵族，它不愿意同HTML呆在一起，所以干脆以外部文件的形式独立存在。通常我们使用 <link> 元素或者@import语句将它们导入HTML。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
我们应当尽可能使用external style，我想理由有很多，大家都知道，我也就不重复了。
还有一种user style与以上三者略有不同，如果你使用IE浏览器，那么你可以在Tools Internet Options General Appearance Accessibility User style sheet 下找到添加user style的地方（原谅我没有中文版的IE浏览器）。
既然我们有如此多的添加style的方法，那么难以避免样式会产生层叠。如：
<p class="intro" style="color:red;">This is a paragraph.</p>
我们在使用以上inline style的同时，又在我们的external style中使用了：
p{
color : yellow;
}
我们甚至还在拥有 class="intro" 的 <p> 元素上应用了：
p.intro{
color : blue;
}
这样我们就 在同一元素的同一属性 color 上，拥有多条CSS规则指定了值 。这种情况被称为层叠(Cascading)。当层叠发生时，CSS Parser将根据优先级算法来确定最终选用的值。
优先级算法按照先后顺序考虑以下三个方面：
CSS规则的重要性和来源
CSS规则的特殊性
CSS规则在文档中出现的顺序
算法过程分为4步：
1、针对某一元素的某一属性，列出所有给该属性指定值的CSS规则。如上例中，在 class="intro" 的 <p> 元素上，有三条CSS规则指定了 color 属性。
2、根据声明的重要性和来源进行优先级排序
重要性有两种：
important
normal（即非important）
在CSS规则后添加 !important 的重要性要高于没有添加的。
来源有三种：
user agent stylesheet 浏览器默认样式
author stylesheet 开发人员定义的样式
user stylesheet 用户在浏览器中定义样式
重要性和来源的优先级排序从低到高是：
user agent stylesheet
user style sheets中的normal规则
author style sheets中的normal规则
author style sheets中的important规则
user style sheets中的important规则
经过以上排序，如果有一条CSS规则的优先级高于其他所有竞争规则，那么算法结束，返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级，那么它们将要继续竞争下去，算法将进入第3步。
3、按照特殊性（Specificity）排序
CSS将计算多条规则中指定每一规则的selector的特殊性值，该值越高，优先级越高。
特殊性值是一个由4个整数组成的一个类似数组的值：a,b,c,d，其中a的权重最高，依次类推，d的权重最低。selector特殊性值的计算方法是：
如果该规则是一条inline style，那么a = 1
如果该规则由selector指定，selector中出现的id selector的数量就是b的值
如果该规则由selector指定，selector中出现的属性selector（包括class selector）或者伪类selector的数量总和就是c的值
如果该规则由selector指定，selector中出现的元素selector或者是伪元素selector的数量总和就是d的值。
universal selector * 的特殊性值为0,0,0,0
官方网站 提供了一些例子可以加深理解。
在根据特殊性值排序时，由于a的权重最高，因此首先比较a，在a相同的情况，在比较b，依次类推。因此不论b,c,d值有多大，inline style总是具有最高的特殊性。
如果根据以上特殊性排序后，有一条CSS规则的优先级高于其他所有竞争规则，那么算法结束，返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级，那么它们将要继续竞争下去，算法将进入第4步。
4、比较CSS规则在文档中出现的顺序
出现在后的总是比出现在前的具有更高的优先级，因此出现在最后的那条语句将被作为该属性的值。
至此，算法结束。我彻底晕了。
