@layer 声明与排序

CSS 层叠层（@layer）提供了一种机制，可以在不依赖特异性的情况下，显式控制 CSS 规则在层叠中的优先级。即使选择器具有更高的特异性，优先级较低的层仍会失效。

没有层时，每条 CSS 规则都会通过特异性和源代码顺序进行竞争。当重置样式、组件样式和工具样式都争夺优先级时，就会导致特异性之争。层为每个组提供了固定且可预测的优先级。

请在开头通过一条语句声明各个层。声明顺序决定优先级，后声明的层会覆盖先声明的层。

@layer 声明应位于样式表的顶部（或主导入文件的顶部）。声明之后，可以按任意顺序向层添加样式；优先级由声明顺序决定，而不是由添加样式的位置决定。

由于层的优先级在声明时确定，因此可以在任意位置向层添加样式，甚至可以通过前向引用，在层声明之前添加样式。真正重要的是已声明的顺序。

无论特异性如何，后声明层中的声明始终会覆盖先声明层中的声明：

放置在任何层之外的样式称为未分层样式。它们具有最高优先级，甚至高于最后声明的层。请将其用于必须始终生效的紧急覆盖。

完整的优先级顺序（作者样式从高到低）：

1. 未分层样式（位于任何 @layer 之外）
2. 最后声明的层（例如工具层）
3. 倒数第二个层（例如组件层）
4. 更早声明的层（基础层、重置层）

层中的 !important 比较棘手：它会反转该声明的层顺序。最早层中的 !important 会覆盖后续层中的 !important。这与用户样式和作者样式的原始层叠行为一致。

可以使用点号表示法嵌套层：

一个符合实际项目的层设置：

层声明为：@layer base, components, utilities。发生冲突时，哪个层的样式会获胜？

@layer 会建立具有明确顺序的层叠层。请按优先级顺序声明层名称（优先级最低的在前）。后声明的层始终会覆盖先声明的层，与特异性无关。未分层样式具有最高优先级。!important 会反转该声明的层优先级顺序。