@layer 优先级由源码中声明顺序决定，第三方样式未包装则落入隐式顶层并高于所有显式层；必须用 @import url() layer() 显式导入框架到指定层，且 @layer 声明须在顶层、不可嵌套。
@layer 的优先级顺序必须在 CSS 文件顶层显式声明，且声明顺序即生效顺序；第三方框架样式若未用 @layer 包装，会自动落入隐式顶层，优先级高于所有显式层——这是最容易翻车的地方。
为什么 @layer 声明顺序不能靠文件加载顺序补救
浏览器只认 CSS 源码中 @layer 规则的出现顺序，和 <link> 标签的加载顺序、@import 位置、甚至内联 <style></style> 的 DOM 插入时机都无关。常见错误是把框架样式 CSS 放在业务样式前面，以为“先加载就先低权”，结果发现它压根没进任何层，直接成了隐式顶层，反而赢了你后写的 @layer components。
- 显式声明的层（如
@layer reset, base, components;）之间按此顺序排优先级：components > base > reset - 所有未包裹在
@layer块里的规则（包括第三方框架原始 CSS）自动归入「未命名顶层」，优先级高于任何显式层 - 想让框架样式服从你的层级控制，必须用
@import url("framework.css") layer(framework);显式导入到指定层
如何安全接入多个框架并控制它们的覆盖关系
比如同时用 Tailwind、Bootstrap 和一个内部 UI 库，又不想让它们互相打架，关键不是“谁先谁后”，而是“谁被收编进哪一层”。你得主动把它们拉进你的层体系里，而不是放任自流。
- 先统一声明层顺序：
@layer reset, framework, base, components, utilities; - 用
@import把每个框架导入对应层：@import "tailwind.css" layer(framework);、@import "bootstrap.css" layer(framework);（同名层自动合并） - 内部 UI 库若支持
layer()导入，同样处理；不支持就手动用@layer framework { /* 粘贴其 CSS */ }包裹 - 业务组件样式写进
@layer components，工具类进@layer utilities——此时它们天然高于framework层
@layer 嵌套与第三方库冲突的真实坑点
有些 UI 库（如某些基于 Stylus 或 PostCSS 的组件包）会在构建时把样式打散、注入 @media 或 @keyframes 块里，如果你试图把整个 @import 写进 @layer framework { } 块内，会导致语法非法——@layer 本身不能嵌套在任何块中。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@layer framework { @import "ui-lib.css"; }→ 浏览器直接忽略该@layer声明 - 正确做法：确保
@import ... layer(...)是顶层语句，和@layer reset;并列 - 如果框架 CSS 里自带
@layer（如新版本 Bootstrap），要检查它的层名是否和你冲突；同名层会合并，但顺序由首次声明位置决定，不是由@import位置决定
DevTools 里验证层是否生效的唯一可靠方式
别信“看起来生效了”，打开浏览器 DevTools 的 Styles 面板，找到目标元素的某条样式，看右侧 Origin 栏：如果显示 layer: components 或 layer: framework，说明成功；如果显示 user agent stylesheet、inline 或空白，说明这条规则根本没进你声明的层。
- 隐式顶层的样式 Origin 栏不会标
layer，只显示来源路径或unattributed - Chrome 和 Firefox 当前（2026 年中）已完整支持
@layer并在 Origin 栏标注，Safari 17+ 也已支持，但旧版 Safari 会静默降级为普通 CSS - 一旦发现某条本该在
components层的样式出现在 Origin 的unattributed下，立刻检查它是否被意外写在媒体查询内部、或被包裹在某个选择器块里
真正难的不是写对 @layer 语法，而是把所有外部样式源——尤其是那些你不完全掌控的框架——全部收编进同一套层秩序里。漏掉一个没包装的 @import，整套优先级设计就可能崩掉一层。
