CSS选择器优先级，及权重 计算规则

CSS选择器的优先级是由选择器的组成部分确定的，主要有四个层次：元素标签、类选择器、ID选择器和内联样式。权重是根据这四个层次的不同类型进行计算的。

计算规则如下：

1. 对于每个选择器，统计其中的id选择器的数量。
2. 统计其中的其他选择器（包括类选择器、属性选择器等）的数量。
3. 如果选择器中包含了!important规则，则其权重会被提高到最高。
4. 最后计算内联样式，它的权重最高，为1000。

权重的计算方法是：将所有的id选择器的数量按照10的幂进行计算（每多一个id选择器，就乘以10），然后将其他选择器的数量相加。最后，将内联样式的1000添加到最终结果中。

例如，考虑以下选择器：

p#content .list-item span

这个选择器包含一个id选择器(#content)，一个类选择器(.list-item)和一个元素标签(span)，没有使用!important。计算其权重如下：

1. 计算id选择器的数量：1
2. 计算其他选择器的数量：1（类选择器）+ 1（元素标签）= 2
3. 内联样式的权重不考虑，因为这个选择器不是内联样式。
4. 最终权重计算为：100 + 2 = 102

如果另一个选择器是：

div#content .list-item span

这个选择器也是包含一个id选择器，一个类选择器和一个元素标签，但是因为id选择器更具体，所以它的权重会更高：100 + 10 + 2 = 112。

如果使用!important，则其优先级会高于所有其他规则，例如：

p#content .list-item span { color: red !important; }

这条规则即使计算出的权重很高，也会被!important所覆盖，使得它具有最高的优先级。