说说你对CSS样式覆盖规则的理解

CSS样式覆盖规则决定了当多个样式规则应用于同一个HTML元素时，哪个样式最终生效。其核心原则是特异性、继承和层叠顺序。

1. 特异性 (Specificity):

特异性决定了哪个样式规则更“具体”地针对目标元素。特异性越高，优先级越高。计算特异性可以将其分解为四个级别（从高到低）：

• 内联样式: 直接写在HTML元素的style属性中的样式，特异性最高 (1,0,0,0)。
• ID选择器: #id，特异性次之 (0,1,0,0)。
• 类选择器、属性选择器、伪类: .class、[attribute]、:hover 等，特异性再次之 (0,0,1,0)。
• 元素选择器、伪元素: p、div、::before 等，特异性最低 (0,0,0,1)。

比较特异性时，从左到右依次比较这四个级别的数值。哪个级别的数值大