CSS 丰富度属性

CSS 的丰富度属性是用来决定当多个 CSS 规则应用到同一个元素时，哪个规则会被应用的属性。一个规则的丰富度越高，它的优先级就越高，该规则定义的样式就会被应用。

选择器的丰富度值

每个选择器都有一个丰富度值。选择器的丰富度值是由选择器的每个组件的值组成的，如下：

• 选择器内的 ID 属性值：每个 ID 属性值都赋予 1 的丰富度值。
• 选择器内的类，属性或伪类：每个类，属性或伪类都赋予 10 的丰富度值。
• 选择器内的元素和伪元素：每个元素和伪元素都赋予 100 的丰富度值。

例如，下面的选择器有一个丰富度值为 11：

#myId.myClass {
  background-color: red;
}

这是因为它包含一个 ID 属性值和一个类，它们各自的丰富度值是 1 和 10。

继承的丰富度值

继承值的丰富度值是 0，因为它们不是选择器。但是，它们会影响选择器的丰富度，因为它们会影响元素的样式属性。

!important 的丰富度值

当样式属性被标记为 !important 时，它的丰富度值会变得非常高。它的丰富度值是最高的，即使存在多个元素相同的丰富度值，也会优先生效。

计算丰富度值

当多个选择器应用到同一个元素时，浏览器会计算每个选择器的丰富度值，并选择丰富度值最高的样式进行应用。

计算丰富度值时，将每个选择器的组件的值相加得到总和。例如，下面的选择器的总丰富度为 112：

body.myClass div#myId::after {
  color: blue;
}

这是因为它包含一个 ID 属性值（丰富度值 1），一个类（丰富度值 10）、两个元素（丰富度值 100）和一个伪元素（丰富度值 1）。

优先级

当多个规则的丰富度相同，则根据样式规则的先后顺序来决定应用哪个规则。最后一个规则将覆盖先前的规则。

总结

了解 CSS 丰富度属性和选择器的计算方式对于编写易于维护的 CSS 代码非常重要。在编写样式时，应避免使用 !important。应使用尽可能简洁的选择器，并让样式规则按顺序排列，以便当它们的丰富度相同时正确选择应用的规则。