移动端第三方ui库样式压过自定义规则，是因为未用@layer收编的样式默认落入未命名顶层，优先级高于显式命名层；正确做法是用@import url("...") layer(vendor)或手动粘贴css到@layer中，并确保@layer声明位于css首行且无前置内容。
为什么移动端第三方UI库样式总压过你的自定义规则
因为没被 @layer 收编的 UI 库 CSS（比如直接 <link href="vant.css"> 或 @import "cube-ui.css"）默认落入「未命名顶层」，浏览器规定它的级联优先级高于所有显式声明的命名层——这不是 bug，是规范行为。你在 @layer overrides { .van-button { color: red; } } 里写的规则，只要 Vant 的样式是裸导入，它就天然赢。
DevTools 的 Computed 面板里，被划掉的规则若 Layer 列为空，说明它根本没进层；Styles 面板中右侧没有 layer: vendor 标识，也是一样。
怎样把 Vant / Cube-UI / NutUI 等移动端库“塞进”指定层
不能写 @layer vendor { @import "vant.css"; }——这种嵌套 @import 是非法语法，浏览器会静默忽略整块。
正确做法只有两种：
- 用顶层语句：
@import url("node_modules/vant/lib/index.css") layer(vendor);（注意 URL 必须带引号，layer()是函数调用形式，不是属性） - 如果库不支持
layer()导入（如老版本 NutUI），就得手动复制其构建后 CSS 内容，粘贴进@layer vendor { /* paste here */ }
某些现代库（如 Vant 4.9+、NutUI 4.5+）已原生导出 @layer vant;，但必须确认你项目中声明的层名是否一致：@layer vendor; 和 @layer vant; 是两个独立层，不会自动合并。
@layer 声明顺序错位会导致整个机制失效
@layer reset, base, vendor, overrides; 这类层名声明语句，必须出现在整个 CSS 文件或 <style></style> 标签的第一行——前面不能有任何内容，包括注释、空行、@charset（@charset 是唯一例外，但必须是第一行）、@import、普通选择器，甚至一个空格都不行。
常见错误：
- 把
@layer vendor;写在reset.css文件中间 - 在
@layer base { ... }后面补一句@layer theme;—— 后声明的theme层不会插入到已有层序列中，会被当作隐式层处理，优先级不可控 - Vite 构建后发现层名消失？大概率是 PostCSS 没启用
postcss-cascade-layers插件，旧版会直接删掉整条@layer语句，还不报错
移动端响应式覆盖要和 @layer 绑定在一起
单独写的 @media (max-width: 768px) { .nut-button { padding: 0.5rem; } } 不属于任何层，仍落在未命名顶层，可能被 @layer vendor 中的同名规则压制。
正确写法是把媒体查询和样式写在同一层内：
@layer responsive {
@media (max-width: 768px) {
.nut-button {
padding: 0.5rem;
font-size: 14px;
}
}
}
同时注意：!important 在跨层场景下完全失效。你在 @layer overrides 里写 .nut-button { color: red !important; }，压不过 @layer vendor 里的 #app .nut-button { color: blue; } —— 因为 !important 只在同层内起作用。
真正关键的不是加 !important，而是确保第三方样式进了层、你的覆盖样式在更高层、且媒体查询没脱离层结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
