CSS级联层样式权重和优先级

CSS 的级联层（Cascade Layers）、样式权重（Specificity） 和 优先级（Priority） 是决定浏览器最终采用哪条样式规则的核心机制。
我们可以把它理解为一个“决策流程”：

---

🧩 一、级联层（Cascade Layers）

层（layer） 是 CSS 从 CSS Cascade Level 5 引入的新概念，用来更清晰地管理不同来源或模块的样式优先级。

1. 定义层

@layer reset, base, theme, components, overrides;

或定义并写入样式：

@layer base {h1 { color: black; }
}
@layer theme {h1 { color: blue; }
}

2. 层的优先级规则

• 后声明的层优先于先声明的层（类似 z-index）
• 层内仍然遵守正常的级联规则（!important、权重、源顺序等）
• 未声明层的样式（普通样式）优先级最低

🧠 顺序优先级示意图（从低到高）：

普通样式（无层） < @layer 早声明层 < @layer 晚声明层

例如：

@layer reset {h1 { color: black; }
}
@layer theme {h1 { color: blue; }
}

结果是 h1 为蓝色（theme 在 reset 之后）。

---

⚖️ 二、样式权重（Specificity）

权重决定当多个规则作用在同一元素上时，哪一条更“具体”从而生效。

1. 权重计算规则

选择器类型	权重值表示	示例	权重
内联样式	(1,0,0,0)	<div style="color:red;">	最高
ID 选择器	(0,1,0,0)	#title {}	高
类、伪类、属性选择器	(0,0,1,0)	.btn, [type=text], :hover	中
元素、伪元素选择器	(0,0,0,1)	div, p::after	低
通配符、继承、@layer 未定义层	(0,0,0,0)	*, inherit	最低

2. 示例

div p { color: black; }        /* (0,0,0,2) */
p.highlight { color: red; }    /* (0,0,1,1) */
#main p { color: blue; }       /* (0,1,0,1) */

结果是 #main p → 蓝色，因为 ID 权重最高。

---

🚨 三、优先级（最终级联顺序）

当浏览器确定哪条样式最终生效时，它遵循以下顺序：

1. 重要性（Importance）

   • !important 的样式优先于非 !important
   • 但层级（layer）也会影响 !important 的比较

2. 来源（Origin）

   • 用户代理样式（浏览器默认）
   • 用户样式（用户设置）
   • 作者样式（开发者编写）
   • 作者样式通常优先于浏览器默认

3. 层（Layer）

   • 按 @layer 定义顺序比较

4. 权重（Specificity）

   • 比较选择器权重

5. 源代码顺序（Source Order）

   • 同权重、同层时，后声明的覆盖前面

---

💡 四、!important 与层的结合

@layer base {h1 { color: red !important; }
}
@layer theme {h1 { color: blue !important; }
}

即使两者都有 !important，仍然是后声明的层 (theme) 优先，结果为蓝色。

---

✅ 五、总结层次关系图（优先级从低到高）

优先级层级	示例	说明
浏览器默认样式	<h1> 默认样式	最低
普通无层作者样式	h1 {}	低
@layer 早声明层	@layer base {}	中
@layer 晚声明层	@layer theme {}	高
内联样式	style="..."	更高
!important 样式	color: red !important	最高