一把CSS权重弹刀，降伏样式BUG

2023-12-24 23:15:22

你对CSS权重真的足够了解吗？

提到CSS权重，相信各位前端开发工程师都很熟悉。权重，就是CSS样式选择器的重要属性之一，决定样式优先级，也就是说，决定哪条规则应运而生，哪条规则将要被覆盖。

本文将深入探讨CSS权重，从定义、计算规则、继承和级联，到如何操作权重等，全方位解析权重机制，并结合典型案例，帮助我们更好地理解和掌握CSS权重，以提高问题定位和解决能力，让开发更高效，提升编码能力，成为前端开发高手，让我们再也不会为CSS样式生效而烦恼。

权重是什么？

权重，是CSS样式选择器的重要属性之一，决定样式优先级，即决定哪条规则应运而生，哪条规则将要被覆盖。

权重的计算规则

权重的计算规则如下：

元素类型权重：权重为1。
类选择器权重：权重为10。
ID选择器权重：权重为100。
内联样式权重：权重为1000。

权重的继承和级联

权重具有继承性和级联性。

继承性：父元素的权重会继承给子元素。
级联性：多个选择器同时作用于一个元素时，权重较高的选择器会覆盖权重较低的选择器。

如何操作权重？

CSS权重并不是一成不变的，我们可以通过以下方法操作权重：

使用多个选择器：我们可以使用多个选择器来提高权重。
使用ID选择器：ID选择器具有最高的权重，我们可以使用ID选择器来覆盖其他选择器。
使用内联样式：内联样式具有最高的权重，我们可以使用内联样式来覆盖其他选择器。

实战演练

现在，让我们通过一个实际案例来演示如何操作CSS权重。

<style>
/* 选择器1 */
.box1 {
  color: red;
  background-color: blue;
}

/* 选择器2 */
#box2 {
  color: green;
  background-color: yellow;
}

/* 选择器3 */
#box2 .box3 {
  color: purple;
  background-color: orange;
}

/* 选择器4 */
<style>
.box4 {
  color: black;
  background-color: white;
}
</style>