优先级与层叠

当多个CSS规则作用于同一元素时，浏览器根据“优先级”与“层叠规则”决定最终应用的样式。

1. 优先级（Specificity）

每个选择器都有一个优先级值，优先级越高的规则将覆盖低优先级的规则。

• 内联样式（如 style=""）优先级最高。
• ID选择器 #id 优先级高于类 .class 和元素选择器。
• 选择器越具体，优先级越高。

示例优先级从高到低：

style="..."            /* 内联样式 */
#header                /* ID选择器 */
.nav .item             /* 类选择器组合 */
div p                  /* 元素选择器 */

`

2. !important 的使用

使用 !important 可以强制提升某条规则的优先级，覆盖其他规则。

p { color: red !important; }

但建议谨慎使用，以免增加样式维护难度。

3. 层叠（Cascading）

当选择器优先级相同时，遵循以下规则决定生效顺序：

• 后写的样式覆盖先写的样式；
• 外部样式表 < 内部样式表 < 内联样式；
• 浏览器默认样式 < 用户样式 < 作者样式；

理解并合理运用优先级与层叠机制，是CSS调试和结构优化的关键。