CSS 如何提高权重？

如何计算权重？

计算规则：权重由（A、B、C、D）四个值决定，这四个值的含义如下：

1. 如果出现内联样式 A = 1，否则 A = 0
2. B 的值等于ID选择器出现的次数
3. C 的值等于类选择器、属性选择器、伪类出现的次数
4. D 的值等于标签选择器、伪元素出现的次数

根据上面的规则求出A、B、C、D的值，例如：

     #nav-global > ul > li > a.nav-link:hover

1. 因为没有内联样式，A=0
2. ID选择器出现过一次，B=1

3. 类选择器出现1次，属性选择器出现0次，伪类选择出现1次，C=2

4. 标签选择器出现3次，D=3

求出的值可以简化为 （0，1，2，3）

如何比较权重？

根据求出来的权重值（A，B，C，D）从左向右依次比较，较大者胜出；如果四位都相等，则遵循后来者居上原则。

例如：

#nav-list .item {
    color: #f00;
}
.nav-list .item {
    color: #0f0
}

#nav-list .item 的优先级为（0，1，1，0）
.nav-list .item 的优先级为（0，0，2，0）

A值都是0，B值前者1大于后者0，所以 #nav-list .item 应该大于 .nav-list .item ，字体颜色会是 #f00。

如何增加权重？

日常开发中，我们经常遇到要覆盖已有样式的问题，但是增加了样式之后却因为权重不够高而无法成功覆盖，通常我们会尝试一下几个方案：

1.根据页面DOM结构，写出一个权重相同的选择器。缺点：不易于维护，DOM结构发生更改，覆盖的样式就需要更改。

示例：

• <div class="box1">
      <div class="box2">
          <div class="box3">文字</div>
      </div>
  </div>
   
  // 原有样式
  .box1 .box2 .box3 {color: blue}
   
  // 覆盖样式（ps:这么写可以覆盖，但是DOM结构发生更改，CSS结构可能也需要更改）
  .box1 .box2 .box3 {color: red}

2. 使用更深的层级。缺点：为了增加权重而去增加DOM结构，很显然不是最优解，更何况很多组件你没法更改样式。

3.使用ID选择器覆盖。缺点：这样会使样式权重过高，之后想要覆盖只能使用!important了。

4.使用!important。缺点：这是最差的方法，会让样式权重高到下一次你不知道怎么解决。

那么如何更好的增加权重呢？

.box3.box3.box3 { color: red}

叠加你所要更改的元素类名，既增加了权重，也不需要考虑它结构发生更改，也不需要考虑下一次如何覆盖，轻轻松松覆盖样式了哟~