CSS（层叠样式表）的优先级是指当多个样式规则应用于同一个元素时，哪个规则会最终被应用。CSS优先级由几个因素决定，主要基于以下规则：

  1. 内联样式：直接在HTML元素的style属性中定义的样式拥有最高的优先级。

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

  2. ID选择器：id属性对应的选择器优先级高于类选择器、伪类选择器和属性选择器。

    css#header { color: red; }

  3. 类选择器、伪类选择器和属性选择器：优先级低于ID选择器，但高于元素选择器和伪元素选择器。

    css.header { color: red; }:hover { color: red; }[type="text"] { color: red; }

  4. 元素选择器和伪元素选择器：优先级最低。

    cssdiv { color: red; }::after { content: " "; }

  5. 通配符选择器：*选择器的优先级低于所有其他选择器。

    css* { color: red; }

  6. 继承：某些CSS属性是从父元素继承的，继承的优先级通常最低。

  7. !important规则：在同一个选择器中，!important声明的样式会覆盖其他所有规则，拥有最高优先级。

    cssp { color: red !important; }

  8. 源代码顺序：如果所有其他因素都相同，那么后声明的规则会覆盖先声明的规则。

优先级计算公式（非官方，但有助于理解）：

  • 内联样式：1,0,0,0

  • ID选择器：0,1,0,0

  • 类选择器、伪类选择器、属性选择器：0,0,1,0

  • 元素选择器、伪元素选择器：0,0,0,1

  • 通配符选择器：0,0,0,0

然后，将这些值相加，数值越大，优先级越高。如果两个规则的总和相同，则使用后来的规则。

请注意，!important声明的样式会无视这些规则，直接覆盖其他所有样式，除非另一个!important声明的优先级更高。