CSS2中从优先权重的计算方式来辨别下CSS

CSS2 中，样式的优先权重是由选择器的特殊性（specificity）和源代码顺序（order）两者共同决定的。通过这个规则，我们可以区分不同优先级的 CSS 规则，并决定哪个样式优先应用。

选择器特殊性

每个选择器都有它自己的特殊性值，表示它的权重。特殊性值靠谱如下：

• 选择器中每个 ID 值为一个数，即 0, 1, 0, 0
• 选择器中每个 class 值或者属性选择器、伪类选择器都为十进制计数器加 1，即 0, 0, 2, 1
• 选择器中每个元素和伪元素都为十进制计数器加 1，即 0, 0, 1, 0

越具体的选择器，它的特殊性就越高。例如，一个 ID 选择器的特殊性值要比一个类选择器的特殊性值高，因为 ID 选择器更加具体。

源代码顺序

如果两个样式规则具有相同的特殊性值，则先出现在 CSS 源代码中的样式表的规则优先。

例如，如果你在同一个 CSS 文件中写了以下 CSS 规则：

body {
  background-color: blue;
}

body {
  background-color: red;
}

则最终的背景颜色将是红色，因为红色的 background-color 规则出现在了后面。

优先级的计算方式

知道了选择器特殊性和源代码顺序的规则，我们就可以计算出样式的优先级了。假设我们需要决定以下三个样式的优先级：

body {
  background-color: yellow;
}

#container {
  background-color: green;
}

#container .inner {
  background-color: blue;
}

首先计算选择器的特殊性值。根据上面的规则，body 选择器的特殊性是 0, 0, 0, 1，#container 选择器的特殊性是 0, 1, 0, 0，#container .inner 选择器的特殊性是 0, 1, 0, 1。由此，我们可以得出以下优先级：

• container .inner：0, 1, 0, 1

• container：0, 1, 0, 0

• body：0, 0, 0, 1

接下来，我们来比较源代码顺序。由于样式规则都在同一个文件中，因此我们只需要看样式规则的出现顺序。根据我们的例子，body 规则最先出现，因此它的优先级最低。而 #container 和 #container .inner 规则都在后面出现，因此它们的优先级要高于 body。最终的优先级如下：

1. container .inner：0, 1, 0, 1

2. container：0, 1, 0, 0

3. body：0, 0, 0, 1

因此，在这个例子中，最终应用的背景色是蓝色，因为 #container .inner 的规则具有最高的优先级。

下面是另一个例子：

#container .red {
  color: red;
}

.blue {
  color: blue;
}

首先计算特殊性：

• container .red：0, 1, 0, 1

• .blue：0, 0, 1, 0

然后比较源代码顺序，因此 .blue 规则优先于 #container .red 规则，最终应用的文字颜色是蓝色。