unlayered样式总能覆盖@layer内规则，因CSS规范规定未归入任何@layer的样式天然位于级联顺序最前端，优先级高于所有命名层；如antd/dist/reset.css即属此类，会无条件压制Tailwind v4的@layer base重置。
unlayered样式为什么总能覆盖@layer内的规则
未归入任何@layer的样式（即“unlayered”）在级联顺序中天然高于所有命名层，这是CSS规范硬性规定的优先级层级，不是浏览器实现差异。只要你在style标签或.css文件里写了p { color: red; }这种没套@layer的规则，它就自动落在anonymous layer里，且这个层永远排在所有@layer xxx之前——哪怕你把它写在文件末尾。
- Ant Design v6 的
antd/dist/reset.css就是典型 unlayered 样式，所以它能覆盖 Tailwind v4 的@layer base里的* { margin: 0; } - 内联样式（
style="..."）和!important规则不受此影响，它们仍按原有规则胜出 - 用开发者工具检查元素时，unlayered 规则在“Computed”面板里会显示为
(user agent stylesheet)或(inline)，但不会标出 layer 名
怎么验证一个样式是否真的属于 unlayered
最直接的方式是看它是否被包裹在@layer块内，以及是否通过@import ... layer(...)导入。只要没显式归属，就是 unlayered。注意：空的@layer {}块不算声明，也不改变其内部规则的归属。
- ✅ 正确 unlayered：
button { background: #007bff; } - ❌ 不是 unlayered：
@layer components { button { background: #007bff; } } - ❌ 也不是 unlayered：
@import "button.css" layer(components); - ⚠️ 特别注意：
@layer reset { * { margin: 0; } }和* { margin: 0; }表面效果相似，但后者优先级更高，前者会被前者干掉
为什么把 reset 写成 unlayered 反而容易出问题
因为 unlayered 规则无法被后续同名层合并或调整顺序——它一旦存在，就锁死在最高层位置。Tailwind v4 的 @layer base 本意是提供可被覆盖的基础重置，但如果你自己手写一份 unlayered 的 * { margin: 0; }，它就会无条件压制所有组件层的内边距/外边距设置，比如 Antd 的 .ant-btn 按钮 padding 可能直接消失。
- 常见症状：按钮文字紧贴边缘、卡片没有间距、表单控件高度塌陷
- 排查方法：临时删掉所有未包裹的全局重置规则，只留
@layer块，看样式是否恢复 - 安全做法：把 reset 归入明确 layer，例如
@layer reset { * { margin: 0; padding: 0; } }，再确保它在所有其他 layer 声明之前出现
浏览器兼容性对 unlayered 行为的影响几乎为零
@layer 本身有兼容性门槛（Chrome 110+、Firefox 119+、Safari 17.4+），但 unlayered 行为是 CSS 级联模型的老规则，所有浏览器都一致执行。也就是说，你在旧版 Chrome 里写的 div { color: blue; } 和在新版里一样，始终压过任何 @layer 内的同名规则。
真正容易被忽略的是：你写的 unlayered 规则可能来自多个地方——Umi 自动注入的 reset、第三方插件的 inline style、甚至某个 console.log 插件悄悄插入的 style 标签。它们不显眼，但优先级极高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
