CSS的优先级计算是一个相对复杂但又非常重要的概念，在前端开发中，它决定了当多个样式规则应用于同一个元素时，哪个规则将最终生效。以下是CSS优先级计算的详细解释：
1. 优先级计算的基础
CSS的优先级主要由选择器的类型和它们出现的次数决定。每个选择器都有一个相应的权重值，这些权重值将用于比较和确定优先级。
2. 选择器的权重值
- 内联样式（直接在HTML元素上通过
style属性设置的样式）的权重值最高，为1000。 - ID选择器（如
#id）的权重值为0100。 - 类选择器（如
.class）、属性选择器（如[attribute=value]）和伪类选择器（如:hover）的权重值为0010。 - 元素选择器（如
div、p等）和伪元素选择器（如::before、::after等）的权重值为0001。 - 通配符选择器（
*）、子选择器（>）、相邻同胞选择器（+）等，它们的权重值为0000，对优先级的贡献为0。
3. 计算过程
- 首先，根据每个选择器的权重值，计算出一个四位数（如0000到1000）的特殊性值（specificity），从左到右分别代表内联样式、ID选择器、类/属性/伪类选择器和元素/伪元素选择器的数量。
- 然后，比较这些特殊性值。值越大，优先级越高。例如，特殊性值
0110（一个ID选择器和一个类选择器）比0020（两个类选择器）的优先级高。 - 如果特殊性值相同，则比较规则的书写顺序。后声明的规则（即距离元素出现最近的规则）将覆盖先声明的规则。这就是所谓的“就近原则”。
4. !important规则
- 在任何CSS声明中，如果在属性值后面加上
!important，那么这个声明的优先级将是最高的，无论其他规则的特殊性值如何。 - 但是，如果多个声明都使用了
!important，那么它们之间的优先级将再次根据特殊性值和书写顺序来确定。
5. 继承的样式
- 继承得来的样式的优先级是最低的。如果多个规则都适用于同一个元素，但其中一个规则是通过继承得到的，那么它的优先级将低于其他直接声明的规则。
总结
CSS的优先级计算基于选择器的类型和数量，通过特殊性值和书写顺序来确定。了解并掌握这些规则对于前端开发者来说至关重要，因为它可以帮助我们预测和控制CSS规则的实际应用情况，从而避免不必要的样式冲突。
