CSS权重计算方法

CSS 的语法有多种书写方式，元素、类、ID、行内，对于一个大型网站来说，如果CSS 不能通过命名规范和模块化的方式进行有序管理的话，后期维护是非常耗时和困难的，一个效果的改动可能会导致很多 CSS 的变更。由于书写方式的不同，CSS 中有自己定义的一套规则来确定那个 CSS 权重最高，权重最高的效果最终生效。

1.按顺序，如果同样的权重，同样的效果，例如背景色，后声明的会覆盖先声明的。
2.权重计算：CSS 通过 4 位二进制来计算权重。

• 行内元素最高权重（1,0,0,0）。
• ID 选择器其次（0,1,0,0）。
• 类、属性和伪类选择器为（0,0,1,0）。
• 元素和伪元素选择器最低（0,0,0,1）。
  为了方便可以直接按 1000、100 这样计算，最终将数值加在一起，如下表
  | 选择器 (Selector) | 特异性值 (Specificity Value) | 计算方法 (Calculation) |
  |----------------|----------------------|-------------------|
  | p | 1 | 1 |
  | p.test | 11 | 1 + 10 |
  | p#demo | 101 | 1 + 100 |
  | <p style="color: pink;"> | 1000 | 1000 |
  | #demo | 100 | 100 |
  | .test | 10 | 10 |
  | p.test1.test2| 21 | 1 + 10 + 10 |
  | #navbar p#demo | 201 | 100 + 1 + 100 |
  | * | 0 | 0 (通配符被忽略) |

对于引入多个外部样式文件的情况，计算方式与单个文件相同，例如

/* 文件 1: style1.css */
p {
    color: red;
}

/* 文件 2: style2.css */
p {
    color: blue;
}

如果这两个文件都引入到一个 HTML 中，并且 style2.css 在 style1.css 之后加载，则 p 将显示为蓝色，因为来自 style2.css 的 p 选择器由于顺序将优先于 style1.css，并且这两个选择器具有相同权重。
3.最后是 !important，important关键字是具有最高权重，在开发中慎用，会导致全局样式失效。