上周 Code Review，我看到同事在修复一个“按钮颜色不对”的 bug，最后加了一行：

.btn {
  color: red !important;
}

我问他：“为什么非要用 !important？”
他苦笑：“试了所有选择器，优先级都不够……再不加，明天上线就翻车。”

那一刻我知道：不是他想用 !important，而是他不知道现代 CSS 已经有了更优雅的武器。

今天，我就带你彻底搞懂 CSS 层叠（Cascade）的新规则，用 4 种现代方案，从此告别 !important 的“暴力覆盖”。

先搞清问题：为什么 !important 是“技术债”？

• 破坏可维护性：别人无法通过正常选择器覆盖你的样式
• 调试困难：DevTools 里满屏红色 !important，根本看不出谁“赢”了
• 主题切换失效：动态修改 CSS 变量时，!important 会锁死样式

现代 CSS 层叠 = 5 个维度（2026 年你必须知道）

从 Chrome 100+ 开始，CSS 层叠规则已升级为 CSS Cascade Layers（层叠层），优先级顺序如下（从低到高）：

1. Transition animations（过渡动画）
2. User-agent styles（浏览器默认样式）
3. Custom properties（CSS 变量）
4. Regular styles（普通样式）
5. @layer 定义的层 ← 新核心！
6. !important styles
7. !important in @layer
8. Inline styles (style="")
9. !important inline styles ← 最高优先级

方案 1：用 @layer 明确声明样式优先级（推荐！）

这是 W3C 官方推荐、Vue/Vite 官方文档采用 的现代方案。

场景：UI 库样式 vs 业务自定义样式

/* 定义层：先加载基础库，再覆盖业务 */
@layer base, components, utilities;

@layer base {
  /* 第三方 UI 库样式（如 Element Plus） */
  .el-button {
    padding: 8px 16px;
    background: #e0e0e0;
  }
}

@layer components {
  /* 你的业务组件 */
  .my-button {
    @apply bg-blue-500 text-white; /* 如果用 Tailwind */
  }

  /* 覆盖 UI 库？没问题！ */
  .el-button.primary {
    background: #3b82f6; /* 即使选择器更简单，也生效！ */
  }
}

优势：

• 不再需要 .el-button.el-button--primary.my-page .special-btn 这种“选择器军备竞赛”
• 层内依然遵循正常层叠规则，逻辑清晰
• 支持嵌套和导入（@import "reset.css" layer(reset);）

方案 2：提升“作用域”，而非提升“选择器强度”

很多人写：

/* 试图用更长的选择器赢 */
.page-home .main-content .card .btn { color: red; }

但更好的做法是：让样式只在该组件生效。

结合 Vue 的