优先级计算（转）

优先级计算

我们在前面已经比较详细地介绍过 CSS 之间的优先级比较，得到的结论大概如下：

!important > style > id选择器 > 类选择器(伪类，属性) > 元素选择器（伪元素） > * > 浏览器默认 > 继承

对于前面两个（!important 和 style）优先级太高，只要出现肯定就是用该样式。而后面三个的优先级（ *、浏览器默认、继承）又太低，低得根本不用去考虑比较。所以实际工作中，我们面对的优先级主要就在于中间三个（这三个恰恰就是我们声明样式的主力军）。

前面我们也说了中间三个的优先级比较方式，这里我们引入业内普遍使用的一种计算规则来简化下。

我们把每个选择器都用一个数字（权重值）来表示：元素选择器使用个位数，类选择器当使用十位数，id选择器使用百位数。如下：

选择器	权重值
id选择器	100
类选择器(包括伪类选择器)	10
元素选择器	1

这样在计算的时候只需要把对应的数字乘以对应选择器的个数，就得到的最后的权重值，权重值越高那么优先级就高。下面我们用实例来计算下：

• #demo .text a.link

  一个id选择器（1*100）+ 2个类选择器（2*10）+ 一个元素选择器（1*1）= 121

• .list li

  1个类选择器（1*10）+ 一个元素选择器（1*1）= 11

• .list li .tt

  2个类选择器（2*10）+ 一个元素选择器（1*1）= 21

• .list .item .tt

  3个类选择器（3*10）= 30

这样最后的权重值一比较，优先级高低就立显了。但是除此之外我们还有两个问题：

• 如果有10个类选择器，那跟一个 id 选择器的权重值一样，怎么比？

  一句话，还是比不上 id 选择器。首先这些权重值计算规则是我们为了简化计算而得来的，实际是不存在的。然后真实的情况是真的有人做了个试验，试验证明 256 个类才可以比得过一个 id。最后为了性能，建议层级最好不超过 4 层，所以也不会遇到 10 个类选择器。

• 如果权重值相等，怎么办？

  一句话，如果权重值一样，后声明的优先。