@import "lib.css" layer(vendor)必须写在外部CSS文件顶部，因块不支持layer()语法而被静默忽略；需配合@layer声明顺序及块内规则才能实现优先级控制。
@import 本身不能指定优先级，真正起作用的是 @import url() layer() 这个组合语法——它把外部样式“收编”进你定义的命名层，从而让它的优先级受层声明顺序控制。不加 layer() 的 @import 就是普通导入，直接掉进隐式顶层，天然压过你所有 @layer。
为什么 @import "lib.css" layer(vendor) 必须写在外部 CSS 文件里
内联 <style></style> 块中写这行会被浏览器静默忽略括号和参数，等效于 @import "lib.css"，样式仍落进隐式顶层。HTML 规范只允许 <style></style> 中的 @import 带媒体查询（如 @import "x.css" screen），layer() 不在此列。
- 必须新建一个独立 CSS 文件（比如
layers.css），用<link rel="stylesheet" href="layers.css">引入 - 该语句必须出现在
layers.css最顶部，前面不能有任何其他 CSS 规则、@import、:root或带内容的注释 - 路径是相对于
layers.css所在目录，不是 HTML 页面路径 - 漏掉分号会导致后续所有
@layer声明被解析器硬性忽略
@import url() layer() 的合法写法与常见错误
只有一种写法被所有支持 @layer 的浏览器（Chrome 99+、Firefox 119+、Safari 17.4+）认可：
@import "bootstrap.css" layer(framework);
- 引号只能包 URL，
layer("framework")是无效语法 - 层名严格区分大小写：
layer(Framework)和layer(framework)是两个层 - 括号内不能有空格：
layer( framework )在部分浏览器中会失败 - 必须以分号结尾；否则整条语句解析失败，且无任何提示
- 不能写成
@layer framework { @import "x.css"; }——@import不允许嵌套在@layer块内，语法非法
第三方样式进了层，你的覆盖规则为什么还不生效
进了层只是第一步。你的覆盖规则要赢，还得满足两个硬性条件：
- 层声明顺序必须在它之后：
@layer reset, base, framework, overrides;——overrides必须排在framework后面 - 覆盖规则必须写在
@layer overrides { }块内，不能写裸规则（如直接写.btn { }），否则它又掉回隐式顶层，可能被framework层里更高权值的选择器反杀 - 同层内仍按选择器权重决胜负：
@layer overrides { #modal .btn }能赢@layer framework { .btn }，但@layer overrides { .btn }不一定赢@layer framework { .btn.primary } - 构建工具（如 Vite）若未启用
postcss-cascade-layers插件，旧版 PostCSS 会直接删掉整条@import ... layer()，无警告
最常被忽略的一点：层优先级只取决于源码中首次声明该层名的位置，跟文件加载顺序、<link> 出现时机完全无关。哪怕你把 framework.css 放在 HTML 最前面，只要它没被 layer() 收编，它就永远在你所有命名层之上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
