先记住这个答案
完全可以在 @media 里写 @layer，浏览器不会报错。但 @layer 的顺序是全局管理的，它不会因为写在 @media 块里就变成局部的。层的排列位置在样式表解析时就确定了，跟这个 @media 最终是否匹配没有关系。@media 只控制里面的具体规则是否参与计算，不影响层本身的优先级排列。
- 媒体查询内也可声明层
- 媒体查询不匹配时规则不生效，但层本身照常存在
- 层顺序由首次声明决定
- 同名层的规则会合并
层顺序和 @media 匹配是两件事
理解这个问题的关键是分清两个阶段：层排序发生在样式表解析时，规则生效判断发生在计算样式时。
@media 里追加层内容CSS@layer base, theme;
@layer base {
.btn { background: gray; }
}
@media (min-width: 768px) {
@layer theme {
.btn { background: blue; }
}
}第一行 @layer base, theme 声明了两个层，base 排在前面、theme 排在后面。后面的层优先级更高，这个顺序在解析完第一行就定下来了。@media 里的 @layer theme 不会创建一个新的「只在宽屏下存在的层」，它只是往已有的 theme 层里追加规则。
屏幕宽度大于等于 768px 时，theme 层里的 .btn { background: blue } 生效，因为 theme 排在 base 后面，优先级更高，按钮变成蓝色。屏幕窄于 768px 时，这条规则不参与计算，按钮用 base 层的灰色。但 theme 这个层始终存在于层顺序里，不会因为媒体查询不匹配就消失。
第一次出现的位置决定排列
层的排列顺序取决于它第一次在样式表中出现的位置。如果一个层的名字第一次出现是在 @media 内部，它的排列位置就是那个 @media 块在样式表中的位置。
@layer base {
p { color: black; }
}
@media (prefers-color-scheme: dark) {
@layer dark {
p { color: white; }
}
}
@layer utilities {
.hidden { display: none; }
}这里没有提前用 @layer base, dark, utilities 声明顺序。三个层按照第一次出现的先后排列：base 第一、dark 第二、utilities 第三。不管用户是否处于暗色模式，dark 层都排在 base 和 utilities 之间。暗色模式下，dark 层的规则生效并且优先级高于 base；亮色模式下，规则不参与计算，但层顺序不变。
实际项目里建议在样式表最前面用一行 @layer 声明把所有层名列出来，这样顺序一目了然，不用靠阅读代码来推断。
同名层会合并
在不同的 @media 里用相同的层名，不会创建多个独立的层。所有同名的 @layer 块会合并到同一个层里，它们的规则按书写顺序排列在这个层内。
比如桌面端和移动端各自在 @media 里往 theme 层追加了不同的规则，最终 theme 层包含了所有这些规则。在某个断点下，只有对应 @media 匹配的那些规则生效，但它们都属于同一个 theme 层，优先级一样。层内部的冲突按正常的选择器权重和书写顺序决定。
这一点和 JavaScript 的块级作用域完全不同。@layer 没有块级作用域的概念，它更像是命名空间：名字一样就是同一个。
容易答错的地方
- 以为层会变成局部的
- 看到
@media包着@layer，直觉上觉得这个层只在媒体查询匹配时存在。实际上层在解析阶段就已注册到全局顺序里，@media只控制规则是否生效，层本身一直在。 - 以为不同
@media里的同名层是不同的层 @media (min-width: 768px) { @layer a { ... } }和@media (max-width: 767px) { @layer a { ... } }里的a是同一个层，规则会合并。不存在「宽屏版的 a」和「窄屏版的 a」。
面试官还会怎么问？
@layer 写在 @supports 里也是同样的行为吗？
是的。@supports、@media、@document 这些条件 at-rule 只控制规则是否生效，对层排序没有影响。层名照样是全局的，同名照样合并。
不声明层顺序，直接在 @media 里用 @layer，顺序怎么定？
按照层名第一次出现在样式表中的位置排列。如果 @media 块在样式表靠前的位置，那这个层就排得靠前。想要明确控制顺序，在样式表最开头加一行 @layer a, b, c 声明即可。
没有写进任何层的规则，和层内规则谁优先？
没有写进任何层的规则（叫做「无层规则」）优先级高于所有层内规则。这是 @layer 设计的核心之一：层是用来降低优先级的，不是用来提高的。所以第三方库的样式放进层里，你的业务代码不放层，业务代码天然能覆盖库的样式。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。