css - 权重

CSS 中的权重（specificity）是用来确定在多个 CSS 规则中，哪个规则的样式应该优先被应用的一种机制。权重是由不同类型的选择器组成的值，通常用一个四元组（a, b, c, d）来表示，其中：

• a 代表内联样式（inline styles），它的值为 1。
• b 代表 ID 选择器（id selectors），它的值为 ID 选择器的个数。
• c 代表类选择器（class selectors）、属性选择器（attribute selectors）和伪类选择器（pseudo-class selectors），它的值为这些选择器的个数之和。
• d 代表元素选择器（type selectors）和伪元素选择器（pseudo-element selectors），它的值为这些选择器的个数之和。

举个例子，如果一个 CSS 规则为：

div#myId.myClass {
  color: red;
}

那么它的权重为 (0, 1, 1, 2)。

当多个 CSS 规则应用于同一个元素时，CSS 引擎会根据它们的权重来确定哪一个规则的样式应该被应用。具体来说，CSS 引擎会选择权重最高的规则。如果有多个规则的权重相同，则后定义的规则会覆盖先定义的规则。

需要注意的是，!important 关键字可以用来提高一个规则的权重。具体来说，它会给这个规则的权重添加一个极高的值，相当于 (0, 0, 0, ∞)。因此，一般情况下应该避免使用 !important，除非必须这样做。

以下是一些关于 CSS 权重的案例，用来帮助理解权重的计算方法和作用：

内联样式的权重最高，例如：

<p style="color: red;">Hello, world!</p>

这个样式规则的权重为 (1, 0, 0, 0)，因此它的样式会优先于其他样式被应用。

ID 选择器的权重比类选择器和元素选择器高，例如：

<div id="myDiv" class="myClass"></div>

#myDiv.myClass {
  color: red;
}

这个样式规则的权重为 (0, 1, 1, 0)，因此它的样式优先于其他样式被应用。

选择器的权重是可以叠加的，例如：

<p class="myClass"></p>

p.myClass {
  color: red;
}

这个样式规则的权重为 (0, 0, 1, 1)，因为它包含了一个类选择器和一个元素选择器。

通配选择器和关系选择器的权重较低，例如：

<div>
  <p>Hello, world!</p>
</div>

div p {
  color: red;
}

这个样式规则的权重为 (0, 0, 0, 2)，因为它包含了两个元素选择器，但没有类选择器或 ID 选择器。因此，如果有一个包含类或 ID 选择器的规则也适用于这个元素，那么它的样式会优先于这个规则被应用。

!important 关键字会覆盖其他所有样式，例如：

p {
  color: blue !important;
}

p {
  color: red;
}

即使第二个规则的权重更高，但由于第一个规则使用了 !important，因此它的样式会优先于第二个规则被应用。这也是为什么应该谨慎使用 !important 的原因。

总之，了解 CSS 权重机制对于编写高效、可维护的 CSS 代码非常重要，可以避免样式冲突和覆盖等问题。