关于CSS @layer优先级的疑问：层内样式为何未生效？

你误解了MDN关于@layer优先级的说明，正确的规则是：未被放入任何层的作者样式，优先级高于所有作者自定义层内的样式。

具体到你的代码：

• 写在@layer main内部的body样式属于「分层样式」；直接定义的body样式属于「未分层样式」。
• 在作者编写的样式范畴里，未分层样式的优先级是最高的，哪怕选择器的特异性完全相同（比如两个都是body选择器），未分层样式也会覆盖层内样式。所以你看到的#1d1b1b背景生效、层内红色被覆盖是正常现象。

如果要让层内的红色背景生效，可以用两种方式：

1. 将外层样式也放入优先级更低的层中：

@layer main {
  body {
    background: red;
  }
}

@layer secondary {
  body {
    background: #1d1b1b;
  }
}

（注：层的优先级默认按定义顺序排序，先定义的层优先级低于后定义的层，所以上述代码中main层的样式会被secondary层覆盖；如果想让main生效，只需调换两个层的定义顺序即可）

2. 给层内样式添加!important强制提升优先级：

@layer main {
  body {
    background: red !important;
  }
}

body {
  background: #1d1b1b;
}

内容的提问来源于stack exchange，提问作者Bookamba