CSS样式表覆盖的顺序是什么？

CSS（层叠样式表）的样式覆盖顺序是由多个因素决定的。具体来说，CSS的样式应用遵循以下规则，通常称为“层叠顺序”：

1. 重要性（Importance）：首先，!important 声明的样式具有最高优先级，会覆盖其他所有相同选择器的普通规则。例如，如果有两个规则都影响同一个元素的同一个属性，但其中一个规则包含 !important，则 !important 的规则会生效。

   css
   #example {
       color: red !important;  /* 这条规则会覆盖下面的规则 */
   }
   #example {
       color: blue;
   }

2. 优先级（Specificity）：如果规则的重要性相同，则检查选择器的优先级。选择器的优先级从高到低为：内联样式（例如，元素的 style 属性）、ID选择器、类选择器/伪类/属性选择器、元素选择器/伪元素选择器。组合选择器的优先级是其组成选择器优先级的总和。

   css
   /* 优先级示例 */
   h1 { color: red; }            /* 优先级: 1 (元素选择器) */
   .example { color: blue; }     /* 优先级: 10 (类选择器) */
   #example { color: green; }    /* 优先级: 100 (ID选择器) */

   在这个例子中，如果所有选择器都影响同一个 <h1> 元素且都不含 !important，则 #example 的样式（绿色）会覆盖其他的。

3. 源代码顺序（Source Order）：如果重要性和优先级都相同，则后出现在CSS中的规则会覆盖先出现的规则。这是因为最后的规则提供了最新的指令。

   css
   h1 { color: red; }
   h1 { color: blue; }  /* 这条规则后出现，所以文本颜色将是蓝色 */

理解这些规则对于编写有效且可维护的CSS代码非常重要。通过精确控制样式的应用顺序，开发者可以更好地管理样式表并避免样式冲突。