层叠层：为什么样式更好覆盖了

在层叠层出现之前，覆盖样式主要靠选择器权重和书写顺序。现在多了一个维度：层与层的先后关系，而且它比权重更优先。

@layer base, components, utilities;

@layer base {
  a {
    color: var(--link);
  }
}

@layer utilities {
  .text-primary {
    color: var(--primary);
  }
}

同一条链接，同时命中 base 里的 a 和 utilities 里的 .text-primary，胜出的是后者 —— 不是因为类选择器权重更高，而是因为 utilities 层排在后面。

反过来用

未分层的样式优先级高于所有分层样式。所以给第三方组件打补丁时，把覆盖写在层外面，往往不用加权重：

/* 不需要 a.x.y.z */
.prose pre {
  border-radius: 0.75rem;
}

这也是为什么 Tailwind 4 的用户样式能轻松盖过它的工具类。

注意

层名一旦排定顺序，就不能在别处重新排；后出现的 @layer 声明只会往已有的层里追加内容。把所有 @layer 的声明集中写在一处，比散落在文件里可靠得多。