第三方样式必须显式收编进@layer体系才能被控制，否则默认进入隐式顶层，优先级高于所有命名层；需通过@import "plugin.css" layer(plugin);在独立CSS文件顶部导入，并在更高层中用@layer块覆盖。
不能靠写个 @layer plugin 就让第三方样式听你指挥——它必须被显式收编进你的层体系，否则默认落在隐式最高层，天然压过你所有命名层。
第三方 CSS 默认不进任何 @layer，而是进隐式顶层
直接用 <link rel="stylesheet" href="plugin.css"> 或 @import "plugin.css"; 引入的样式，浏览器会把它们归入「未命名顶层」，这个隐式层优先级高于你写的任何 @layer base、@layer components 等显式层。这不是 bug，是规范行为。
- 翻车典型：你在 HTML 里把
plugin.css放在自定义样式app.css前面，结果它的按钮样式反而赢了你后写的@layer overrides { .btn { } } - 验证方式：打开 DevTools → Elements → Styles 面板，看某条规则右侧有没有
layer(overrides)标记；没有，说明它根本没进你声明的层 - 真正生效的前提：第三方样式必须通过
@import "plugin.css" layer(plugin);导入，且该语句必须出现在独立 CSS 文件最顶部
@import layer() 必须写在外部 CSS 文件最顶部
<style> 块里写 @import "plugin.css" layer(plugin); 会被浏览器静默忽略括号和参数，等效于普通导入，照样掉进隐式顶层。
- 正确做法：新建一个
layers.css文件，开头只允许空行或纯注释，然后第一行就是：@import "plugin.css" layer(plugin); - 路径是相对于
layers.css本身，不是 HTML 页面路径 - 该语句必须以分号结尾，漏掉会导致后续所有
@layer声明被忽略 - 构建工具（如 Vite）需启用
postcss-cascade-layers插件，否则旧版 PostCSS 会直接删掉整条语句，无警告
你的覆盖规则必须写在同名层之后的更高层里
写了 @import "plugin.css" layer(plugin);，不代表你能随便改它样式——你自己的规则得放在声明顺序更靠后的层中，且必须包裹在 @layer 块内。
立即学习“前端免费学习笔记（深入）”；
- 层声明顺序必须为：
@layer reset, base, plugin, overrides;（overrides在plugin之后） - 覆盖代码必须写成：
@layer overrides { .plugin-btn { background: #3b82f6; } }，不能写裸规则.plugin-btn { }（否则掉进隐式顶层，可能被plugin层里的高权值选择器反杀） - 层内仍受选择器权重约束：
@layer overrides { #modal .plugin-btn }能赢@layer plugin { .plugin-btn }，但@layer overrides { .plugin-btn }不一定赢@layer plugin { .plugin-btn.plugin-primary } - 如果插件本身已含
@layer plugin，你只需再写一次@layer plugin { }即可合并；但层名大小写敏感，@layer Plugin和@layer plugin是两个层
第三方库没用 @layer？手动包裹是唯一可靠方案
像老版本 Bootstrap、早期 Ant Design 这类没内置 @layer 的库，无法靠 @import ... layer() 自动收编——因为它的 CSS 里根本没有层结构，layer() 参数只是告诉浏览器“把整个文件塞进这个层”，但解析时仍按传统规则走。
- 稳妥做法：复制其完整 CSS 内容，粘贴进你的项目层块：
@layer plugin { /* paste entire plugin.css here */ } - 注意：粘贴前确保
@layer plugin;已在文件顶部声明，且该块不能嵌套在@media或其他规则里 - 若插件 CSS 含
@import、@charset等语句，需保留原位置，否则可能失效 - 构建时若用 PostCSS 处理，确认插件内容未被误删或重排（尤其注意注释和空行）
真正难处理的不是语法，而是第三方库是否暴露了可预测的层结构——你没法强制它用 @layer，只能判断它是否支持，再决定是导入、包裹，还是退回到选择器权重或变量覆盖的老路。
