CSS 权重 (Specificity)

CSS 权重是一种衡量 CSS 选择器优先级的机制。在样式表中，有些规则可能会冲突，需要根据它们的优先级来判断哪个规则将被应用。

权重的计算规则

CSS 权重是一个四元组 (a, b, c, d)，其中：

• a 表示“内联样式”的数量
• b 表示 ID 选择器的数量
• c 表示类、伪类和属性选择器的数量
• d 表示元素选择器和伪元素选择器的数量

特殊性是根据这个参数组的计算而得出的。计算的方式是，对于每个选择器进行以下步骤：

1. 如果该选择器包含内联样式，则将 a 加 1。
2. 对于选择器中的 ID 选择器，将 b 加 1。
3. 对于选择器中的类、伪类和属性选择器，将 c 加 1。
4. 对于选择器中的元素选择器和伪元素选择器，将 d 加 1。

例如，以下选择器的权重是 (0, 1, 2, 0)：

#header .nav li {
  color: red;
}

优先级的比较

比较两个选择器的优先级，可以按照以下步骤进行：

1. 比较 a 的值。
2. 如果 a 的值相同，则比较 b 的值。
3. 如果 b 的值相同，则比较 c 的值。
4. 如果 c 的值相同，则比较 d 的值。

例如，对于这两个选择器：

#header .nav li a {
  color: red;
}

.nav li a {
  color: blue;
}

第一个选择器的权重是 (0, 1, 2, 1)，第二个选择器的权重是 (0, 0, 2, 1)。因此，第一个选择器具有更高的优先级。

注意事项

值得注意的是，CSS 规范中规定了 !important 优先级最高，它可以覆盖除了用户代理样式表外的任何样式规则。除此之外，由于 ID 选择器具有更高的权重，应该尽量避免过度使用 ID 选择器，以免使代码难以维护。同时，也应该尽量减少使用内联样式，以避免给代码带来不必要的复杂度。

结论

在编写 CSS 规则时，应该了解和遵守 CSS 权重规则，以便正确地计算样式的优先级，避免出现不必要的冲突和错误。