CSS加载权重

CSS加载权重

CSS加载权重（优先级）决定了当多个规则冲突时，浏览器应用哪个样式。权重由选择器的类型和组合决定，以下是权重的计算规则：

1. 权重等级

CSS选择器的权重分为四个等级，从高到低依次为：

• 内联样式：直接在HTML元素的style属性中定义的样式，权重最高。

  <div style="color: red;">内联样式</div>
  

• ID选择器：通过#id选择器定义的样式。

  #myId {
      color: blue;
  }
  

• 类选择器、属性选择器、伪类选择器：包括.class、[type="text"]、:hover等。

  .myClass {
      color: green;
  }
  

• 元素选择器、伪元素选择器：如div、p、::before等。

  div {
      color: black;
  }
  

2. 权重计算

权重由四部分组成：(内联样式, ID选择器, 类/属性/伪类选择器, 元素/伪元素选择器)，具体计算方式如下：

• 内联样式：(1, 0, 0, 0)
• ID选择器：(0, 1, 0, 0)
• 类/属性/伪类选择器：(0, 0, 1, 0)
• 元素/伪元素选择器：(0, 0, 0, 1)

权重值从左到右比较，数值大的优先级高。例如：

#myId .myClass div {
    color: red; /* 权重：(0, 1, 1, 1) */
}
.myClass div {
    color: blue; /* 权重：(0, 0, 1, 1) */
}
div {
    color: green; /* 权重：(0, 0, 0, 1) */
}

最终应用的是#myId .myClass div的样式。

3. !important规则

!important可以提升样式的优先级，覆盖其他规则。

div {
    color: red !important; /* 优先级最高 */
}

4. 继承样式

继承的样式权重最低，低于任何直接应用的样式。

body {
    color: blue; /* 继承样式 */
}
div {
    color: red; /* 直接样式 */
}

div内的文本颜色为红色。

5. 相同权重规则

当权重相同时，后定义的样式优先。

div {
    color: red;
}
div {
    color: blue; /* 最终应用 */
}

总结

CSS加载权重由选择器类型决定，优先级从高到低为：内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器。!important可提升优先级，相同权重时后定义的样式优先。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github