CSS中理解层叠性及权重如何分配

CSS中的层叠性和权重是很重要的概念，它们影响着样式的表现和优先级，下面为你详细讲解。

什么是层叠性

层叠性指的是当多个CSS样式作用在同一个HTML元素上时，它们之间的优先级及表现方式。当同一元素上出现了多个CSS规则，浏览器会根据规则来确定其最终表现形式。

如何理解层叠性

我们可以理解为，一个元素的样式可以由多条规则共同定义，不同规则可能会对同一个样式属性设置不同的值，此时最终样式会由这些规则共同作用而成，且符合某些要求的元素会展示出样式。

权重的分配

权重就是规则对某个元素的影响力大小。CSS中，我们可以通过一些方式来定制规则的权重，例如：

• 元素选择器：权重值为1；
• 类选择器：权重值为10；
• ID选择器：权重值为100；
• 行内样式：权重值为1000；
• !important关键字：权重值无限大。

这些计算方式是按权重级别从左到右递进的，因此，当元素上出现多条不同权重的规则时会根据这些规则的权重大小而定制样式。

权重是根据规则的特定组合计算的，规则的数量和特定的组合是权重计算的决定因素，比如不同权重级别的选择器，最终权重大小的计算方式如下：权重大小 = 选择器中权重级别之和。

权重的分配示例

<style>
  span { color:blue; } /* 权重1 */
  .red { color:red; } /* 权重10 */
  #id { color:green; } /* 权重100 */
</style>
<span id="id" class="red" style="color:yellow;">文字颜色是什么？</span>

由于以上样式规则都作用在了同一个元素上，我们需结合以上的权重计算方式来判断最终样式：

• span的权重是1，因此span的color颜色会被蓝色覆盖，成为blue；
• .red的权重是10，因此.red的color颜色会覆盖span的样式，成为red；

• id的权重是100，因此，最终样式是由#id覆盖的，故样式中的颜色是green。

权重与!important关键字

当规则被应用! important的标记，则它将无论如何运作被使用，权重值为无穷大，即权重值将被无限提高，可以将其与其他样式的权重进行比较来确定最终权重。

<style>
  span { color:blue !important; } /* 权重无限 */
  .red { color:red; } /* 权重10 */
  #id { color:green; } /* 权重100 */
</style>
<span id="id" class="red" style="color:yellow;">文字颜色是什么？</span>

• span的color值的权重是无限的，因此样式中的颜色是blue。

总结：在CSS中，权重以及其计算方式和! important关键字可以帮助我们处理CSS样式的优先级问题，让我们可以为元素定制最终样式。