@import 不支持在 <style> 中使用 layer()，仅外部 CSS 文件中合法且需 <link> 引入及现代浏览器支持；<link rel="stylesheet" layer> 是唯一可靠方式，层优先级由声明顺序决定。
@import 本身不支持直接写 layer 参数——这是常见误解。你看到的 @import "xxx.css" layer(name) 写法，只在 CSS 文件中**合法且有效**，但必须满足两个硬性前提：该 CSS 文件是通过 <link> 引入的（不是内联 <style>），且浏览器支持 @layer（Chrome 99+、Firefox 119+、Safari 17.4+）。
为什么 @import url("x.css") layer(theme) 在 <style> 里会失效
内联 <style> 块中写的 @import 不解析 layer() 语法，浏览器直接忽略括号及之后内容，等效于 @import "x.css" —— 也就是退化成普通导入，不进任何层。根本原因是：HTML 规范规定，<style> 中的 @import 只支持带媒体查询的写法（如 @import "x.css" screen），layer() 不在此列。
- ✅ 正确场景：外部 CSS 文件
main.css中写@import "./theme-dark.css" layer(theme); - ❌ 错误场景：
<style>@import "theme-dark.css" layer(theme);</style>→ 层声明被静默丢弃 - ⚠️ 路径解析差异：此时
./theme-dark.css是相对于main.css所在目录，不是 HTML 页面路径
<link rel="stylesheet" layer="name"> 才是真正可靠的层导入方式
想把外部样式表“精准注入”到某个层，唯一推荐且兼容性明确的方式是用 <link> 标签配合 layer 属性。它不依赖 @import，也不受解析顺序或嵌套限制，浏览器原生按层优先级处理。
- 写法必须是：
<link rel="stylesheet" href="reset.css" layer="base"> - 多个
<link layer>的声明顺序决定层高低：后出现的层优先级更高 - 不能和
@import混用同一层名来“合并”——<link layer="ui">和@import "ui.css" layer(ui)是两套独立加载机制，后者仍走 CSS 解析流程，前者走 HTML 解析流程 - 构建工具（如 Vite/Webpack）默认不处理
layer属性，它纯运行时生效，无需额外配置
@layer 声明顺序比文件加载顺序更重要
很多人以为“先加载的 CSS 里的 @layer utilities 就一定更低”，其实错的。层优先级只取决于你在整个页面所有 CSS 中**第一次显式声明该层名的位置**，跟资源是否已下载完无关。
立即学习“前端免费学习笔记（深入）”；
- 例如：
tailwind.css里有@layer utilities { ... }，而你自己的custom.css里也写了@layer utilities { .text-brand { ... } }，只要custom.css的<link>在tailwind.css之后，你的utilities层就覆盖 Tailwind 的同名层 - 但如果
custom.css是通过@import被tailwind.css导入的，那它的@layer声明就发生在tailwind.css解析过程中，天然晚于tailwind.css自身的层声明 → 你的规则仍可能被压住 - 所以最稳做法：所有自定义层都用独立
<link layer>引入，并确保href顺序符合你期望的层叠层级
真正容易被忽略的一点是：layer 属性在 <link> 上生效，但它的层名不会自动“传播”到该 CSS 文件内部的 @import 或嵌套 @layer。也就是说，<link href="a.css" layer="ui"> 只让 a.css 整体归入 ui 层；如果 a.css 里面又 @import "b.css"，那个 b.css 默认不在 ui 层里——除非 b.css 自己也声明了 @layer ui，或者你也给它配一个带 layer="ui" 的 <link>。
