CSS5中的级联层@layer

css level的小常识

其实文章标题中有个错误------严格来说并没有css5这个标准。

在 W3C 的标准里，CSS 是按 模块 (Module) 来发布的，每个模块有不同的发展阶段。

早期（CSS1、CSS2）的时候，规范是一个整体。
后来 W3C 把 CSS 拆成多个模块（选择器、背景与边框、颜色、排版、动画......）。
每个模块会不断迭代，因此有了 Level 1、Level 2、Level 3、Level 4 这样的称呼。

scss 复制代码

CSS1 (1996)
   │
   ▼
CSS2 (1998)
   │
   ├── CSS 2.1 (2004 → 2011 定稿)
   │
   ▼
CSS3 (2001 开始 → 模块化)
   ├── Selectors Level 3 (nth-child, not 等)
   ├── Backgrounds & Borders Level 3 (border-radius, box-shadow)
   ├── Color Level 3 (rgba, hsla)
   ├── Fonts Level 3 (@font-face, font-feature-settings)
   ├── Transitions & Animations Level 3
   └── Media Queries Level 3
        │
        ▼
CSS4 → 已弃用整体称呼 ❌
   │   （不再叫 "CSS4"，而是各个模块单独升级）
   │
   ├── Selectors Level 4 (is, where, has 等)
   ├── Color Level 4 (lab, lch, HWB 等)
   ├── Media Queries Level 4 (交互能力、范围语法)
   └──  Cascade Level 4 (重要性层叠改进)

@layer

CSS 级联层 （@layer）是 CSS Cascade Level 5 引入的新特性，用来创建"层次化的样式组"，让开发者更清晰地控制 不同来源的样式优先级。

tailwind4中就大量使用了该特性：

基本语法和规则

相关的标准可以查阅官方文档：www.w3.org/TR/css-casc...

less 复制代码

  /* 定义层顺序：base < components < utilities */
  @layer base, components, utilities;

  /* 层 base（优先级最低） */
  @layer base {
    #box {
      color: red;
    }
  }

  /* 层 components */
  @layer components {
    .container {
      color: green;
    }
  }

  /* 层 utilities（优先级最高） */
  @layer utilities {
    div {
      color: blue;
    }
  }

层内规则 ：在同一层里，依旧遵循传统的 选择器优先级和书写顺序。
层级顺序 ：写在 @layer 声明中的层，越后面的层 优先级越高。这里utilities的优先级最高，因此文字为蓝色。
important比较 ：越前面的层优先级越高。

和normal比较 ： normal样式优先级高于层内样式，但如果都声明了important，则层内样式高于normal。

但是在加了important声明后，devtool上的显示有bug，不过最终计算的值没有问题。