@import url() layer() 只能在外部 css 文件顶部生效， 块中使用会被浏览器静默忽略，退化为普通导入；必须用 url() 语法、layer(name) 无引号、区分大小写、无空格、以分号结尾；第三方 css 需显式导入到指定层，否则落入高优先级未命名顶层。
@import url() layer() 只能在外部 CSS 文件顶部生效，<style></style> 块里写它等于白写——浏览器会静默忽略 layer() 部分，退化成普通导入。
为什么 @import "antd.css" layer(framework) 在 <style></style> 里不工作
HTML 规范只允许 <style></style> 中的 @import 带媒体查询（如 @import "x.css" screen），layer() 不在此列。哪怕你写了，浏览器也当没看见括号和后面内容，等效于 @import "antd.css"，直接掉进隐式最高层，反而压过你所有 @layer 声明。
- DevTools 的 Styles 面板里看不到层名，Computed 面板查不到来源
- 构建工具（如 Vite）若未启用
postcss-cascade-layers插件，旧版 PostCSS 会直接删掉整条语句，不报错也不警告 - 注释、空行、
@charset都可以，但只要前面有一行普通 CSS 规则（比如body { }），这条@import layer()就失效
@import url("x.css") layer(name) 的合法写法与常见拼写错误
语法非常严格，错一个字符就失效：
- 必须显式用
url()：写成@import "x.css" layer(name)虽然部分浏览器容忍，但@import url("x.css") layer(name)才是规范写法 -
layer()括号里不能加引号：layer("name")或layer('name')是非法的；只能是layer(name) - 层名区分大小写：
layer(Theme)和layer(theme)是两个不同层 - 不能有空格：
layer( theme )在 Safari 17.4+ 中会失败 - 必须以分号结尾：漏掉
;会导致后续所有@layer声明被解析器忽略
第三方 CSS 必须“收编”进你的层体系，否则默认压你一头
直接 <link rel="stylesheet" href="antd.css"> 或 @import "antd.css" 引入的样式，不会归属任何显式层，而是落入「未命名顶层」——它的层叠优先级高于你所有 @layer reset, base, components 声明。
- 正确做法：新建一个
layers.css文件，第一行就写@import url("antd.css") layer(framework); -
layers.css必须通过<link rel="stylesheet" href="layers.css">引入，不能塞进<style></style> - 路径是相对于
layers.css文件本身，不是 HTML 页面路径 - 如果第三方库（如老版本 Element Plus）不支持
layer()导入，唯一可靠方案是复制其 CSS 内容，粘贴进@layer framework { /* paste here */ }
最容易被忽略的一点：@layer 控制的是层间顺序，不是层内豁免权。就算你把 Ant Design 收进了 layer(framework)，它里面 .ant-btn.ant-btn-primary（特异性 0,0,2,0）依然能赢过你 @layer custom { .my-btn }（0,0,1,0）。真要覆盖，得同步升级选择器权重，而不是只改层名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
