CSS @layer 层叠顺序改变后为什么覆盖不了组件样式

如果把 @layer overrides 写在组件层已经创建之后，它不会把这个层重新挪到最后；CSS 层的顺序按“第一次创建”确定，后面的同名声明只会继续往已有层里加规则。普通声明中，后创建的层优先，但所有未分层的普通样式又高于分层样式。因此，覆盖不了组件时，先查层顺序，再查是否有裸写在文件里的选择器。

先把层顺序写成一条可见规则

层名不是优先级开关。假设基础样式文件先执行了 @layer components，页面文件后来才写 @layer overrides, components，最终顺序并不会按这句重新排序。正确做法是把层声明放在入口 CSS 的最前面，让任何导入文件都只能使用已经存在的顺序。

/* 中文注释：入口文件先固定层的创建顺序，后续文件只填充规则 */
@layer reset, components, overrides;

@layer components {
  /* 中文注释：组件默认外观放在中间层 */
  .card {
    color: #24324a;
    background: #ffffff;
  }
}

@layer overrides {
  /* 中文注释：页面级普通声明放在最后一个层 */
  .card {
    color: #0b6b57;
  }
}

这时两个 .card 的 specificity 完全相同，overrides 是后创建层，所以绿色声明获胜。这里的关键不是把选择器写得更长，而是把规则放到正确的层。

覆盖失败时按级联链逐项排查

如果上面的写法仍不生效，可以按下面的顺序看 DevTools 的 Computed 或 Styles 面板：先找最终声明属于哪个层，再确认是否为普通声明或 !important，最后才比较 specificity 和源码出现顺序。

两个最容易误判的变体

第一，未分层样式不是“没有优先级”，它在作者普通声明中位于隐式最终层，所以会压过 @layer 里的普通声明。若第三方库放在层里，而项目入口的裸写规则覆盖了它，这是预期行为。

第二，!important 的层顺序反过来：越早创建的层优先级越高，而且分层的 important 会高于未分层的 important。不要为了压过组件随手加它，否则后续的局部覆盖会更难解释。需要撤回当前层的值时，可以考虑同层的 revert-layer，而不是复制一份组件默认值。

/* 中文注释：只演示重要声明的反向层优先级，不建议把 important 当常规覆盖手段 */
@layer components, overrides;

@layer components {
  /* 中文注释：较早创建的层在 important 竞争中反而更强 */
  .card { border-color: #1d4ed8 !important; }
}

@layer overrides {
  /* 中文注释：普通覆盖仍然放在最后层，避免扩大重要性范围 */
  .card { color: #0b6b57; }
}

落地时保留一份小型检查清单

团队可以把入口层声明当成 CSS 架构的一部分：基础重置、第三方依赖、组件、状态和页面修正分别命名；业务文件不再偷偷创建新层；组件规则尽量不使用 !important；发现覆盖异常时记录“层名、声明类型、specificity、源码位置”四项证据。这样即使换了构建工具，排查路径也不会退化为不断增加选择器。

常见问题

为什么我把 overrides 写在最后一个 CSS 文件里还是没用？

文件靠后不等于层靠后。如果 overrides 这个名字此前已被创建，后续出现只是在原层中追加规则；先检查入口 CSS 的首次创建顺序。

提高 specificity 能解决所有 @layer 覆盖问题吗？

不能。层优先级在 specificity 之前比较，跨层时更高 specificity 也可能输给优先层；先修正层归属，再处理同层选择器。

什么时候应该使用 !important？

只在明确需要表达不可被普通规则覆盖的边界时使用，例如可访问性相关的用户样式协作；组件业务覆盖通常应通过层顺序和简短选择器解决。