@layer reset的优先级由其在声明列表中的位置决定，必须排在最前才为最低；层间优先级高于选择器特异性，且未分层样式优先级高于所有@layer。
@layer reset 本身不会自动变成“最低优先级”——它只是个名字，真正决定优先级的是它在 @layer 声明列表中的位置。
必须先声明所有层，且 reset 要排在最前面
浏览器按 @layer 声明语句中列出的顺序，从左到右赋予优先级：越靠前，优先级越低；越靠后，越高。所以 reset 要生效为最低优先级，它必须是第一个被列出的层名。
-
@layer reset, base, components, utilities;✅ 正确：reset 是第一个，优先级最低 -
@layer base, reset, components;❌ 错误：reset 在中间，优先级居中，不是最低 -
@layer reset;单独声明，但后续又用@layer base { ... }——此时base层会自动插入到已声明层列表末尾，reset仍最低，但可维护性差，不推荐
@layer reset {} 内部样式不能靠加权重“抢优先级”
即使你在 @layer reset 里写 #app .header div button { color: red; } 这种高特异性选择器，它依然会被 @layer base 里一个简单的 button { color: blue; } 覆盖——因为层间优先级碾压选择器特异性。
- 层间优先级 > 层内选择器特异性
-
@layer reset的作用不是“让里面所有规则变弱”，而是“把整块规则钉在底层” - 如果你发现重置样式没生效，大概率是它没被声明在最前，或被未分层样式（如直接写的
body { margin: 0; }）覆盖了
注意未分层样式永远比任何 @layer 都高
这是最容易忽略的一点：@layer 只管自己圈起来的样式。所有没包在 @layer 里的 CSS（包括 <style> 块、link 引入的未标注 layer 的 CSS、内联 style）都拥有比所有 @layer 更高的优先级。
立即学习“前端免费学习笔记（深入）”；
-
body { margin: 0; }（未包裹）会覆盖@layer reset { body { margin: 1em; } } - 想确保 reset 真的“最底”，整个项目所有样式都应纳入
@layer管理，不能漏掉裸写规则 - 第三方库 CSS 如果没用
@import "xxx.css" layer(reset);或没主动声明层，它就属于“未分层样式”，天然压制你的@layer reset
真正起效的关键不在怎么写 @layer reset，而在于全局层声明顺序是否严格、是否清除了所有未分层样式干扰——漏掉一个裸写规则，整个 reset 层就可能被绕过。
