CSS优先级算法如何计算？有哪些判定规定及计算

CSS的specificity，也称为特性或非凡性，是评估CSS值优先级的标准。它就像一套判定规定及计算方式，帮助我们理解哪些样式规则会在多个规则冲突时胜出。Specificity用一个四位数字串来表示（在CSS2中是三位），这更像四个级别，从左到右，左边的数字比右边的数字更重要，而且级别之间不可超越。

当我们有多个选择符应用于同一元素时，Specificity值较高的会获得优先级。让我们深入理解一下选择符的Specificity值：

1. 内联样式，如`

2. `!important`声明的Specificity值是最高的，它的优先级超越所有其他规则。

3. 在Specificity值相同的情况下，CSS代码中后出现的规则会覆盖先出现的规则。

4. 通过继承得到的样式没有specificity的计算，它低于所有其他规则，例如由全局选择符定义的规则。

当遇到多个选择符同时定义样式时，我们按照选择符得到的Specificity值逐位相加。值得注意的是，数位之间没有进制。例如，0,0,0,5 + 0,0,0,5 的结果不是 0,0, 1, 0，而是0,0,0,10。通过计算得到的Specificity值，我们可以决定哪个样式规则最终会被应用。

让我们通过几个实例来深入理解：

1. `div { font-size:12px;}`，一个元素选择符，其Specificity值为0,0,0,1。

2. `body div p{color: green;}`，包含了三个元素的选择符，其Specificity值为0,0,0,3。

3. `div .sjweb{ font-size:12px;}`，一个元素和一个类选择符的组合，其Specificity值为0,0,1,1。

4. `Div sjweb { font-size:12px;}`，一个元素和一个ID选择符的组合，其Specificity值为0,1,0,1。

5. `html > body div [id="totals"] ul li > p {color:red;}`包含了六个元素选择符、一个属性选择符和两个子选择符，其最终的Specificity值为0,0,1,6。

在所有情况中，`!important`声明的优先级都是最高的。Specificity是CSS中决定样式规则优先级的重要机制，确保我们的网页样式按照我们预期的方式呈现。

Cambrian的渲染命令`cambrian.render('body')`将在下一步中执行，以展示网页的主体部分。让我们期待它带来的精彩视觉效果吧！