CSS 层叠层（@layer）

定义

CSS 层叠层（Cascade Layers）是 CSS 层叠规范引入的机制，通过 @layer 规则将样式划分为具名层，层与层之间的优先顺序由声明顺序决定，且在比较选择器权重之前先比较层级。

语法示例

``css @layer reset, base, components, utilities; @layer base { a { color: blue; } } `` 先声明的层优先级低，后声明的层可以用很低权重的选择器覆盖前面层中的高权重规则；未分层样式默认高于所有层。

解决的问题

传统项目中，第三方库、重置样式与业务样式混杂，开发者常靠堆叠选择器或 !important 争夺优先级。层叠层让「谁覆盖谁」成为一种显式架构决策，而非权重竞赛。

应用

常用于组织 reset、框架、组件、工具类的分层，也被 Tailwind CSS 等工具用于管理自身与用户样式的关系。各主流浏览器均已支持该特性。