CSS【详解】样式优先级（含提升优先级的方法、样式的层叠、数值计算法等）

CSS样式的优先级基于几个主要因素：

1. 直接样式：直接在元素上的样式（内联样式）。
2. ID选择器：每个ID只能使用一次，高优先级。
3. 类、属性和伪类选择器：按照选择器的数量和质量。
4. 元素和伪元素选择器：按数量。
5. 通配选择器（*）：最低优先级。

优先级规则：内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器 > 通配选择器

提升优先级的方法：

1. 提升特指度：使用更具体的选择器。
2. !important：在声明的末尾添加，会覆盖所有其他同权重的规则，但不推荐使用，因为它破坏了样式表的管理性。

样式层叠：当多个样式规则应用于同一元素且优先级相同时，会发生样式层叠。

1. 文字和背景的层叠遵循"正常流"和"文字流"的规则。
2. 对于其他属性，如果存在冲突，则遵循"后来者优先"的原则。

使用数值计算优先级：

• 将所有应用到元素的选择器的权重值相加。
• 按照选择器的复杂度进行计算：ID > 类 > 标签。
• 如果权重值相同，则遵循层叠规则。

示例代码：

/* 直接样式 */
#myId { color: red; } /* 权重：100 */
 
/* 类和属性选择器 */
div[data-custom="value"] .myClass { color: blue; } /* 权重：10 + 1 = 11 */
 
/* 元素和伪元素选择器 */
p:before { color: green; } /* 权重：1 */
 
/* 通配选择器 */
* { color: black; } /* 权重：0 */

在这个例子中，即使div[data-custom="value"] .myClass的选择器更具体，也无法超过#myId的ID选择器。然而，如果#myId被移除或者没有应用到该元素上，div[data-custom="value"] .myClass将会因为更多的类和属性选择器而获得应用。

如果需要提升优先级，可以使用更多的ID选择器或者将类和属性选择器组合使用，例如：

#myId .myClass[data-custom="value"] { color: purple; } /* 权重：100 + 1 = 101 */

这样就提升了优先级，即使其他规则中包含了元素或伪元素选择器。