工具盒子

CSS @layer 层叠层生成器

可视化生成 CSS 级联层（CSS Cascading Levels，@layer，2022 年起全主流浏览器原生支持）： 完整支持层声明语句（@layer reset, base, components, utilities;）、 具名层与匿名层、层内多规则编辑、!important 切换、未分层样式区。 内置级联胜出分析——按目标选择器实时计算每个属性的最终胜出声明与原因， 完整实现 @layer 级联算法：普通声明（未分层 > 后层 > 前层）与 !important 反转（前层 > 后层 > 未分层）。iframe 隔离预览实时应用层叠 CSS， 可编辑预览 HTML，内置经典四层、第三方库隔离、主题覆盖、未分层最高、!important 反转等 8 组预设。 适用于第三方库样式隔离、主题系统设计、CSS 优先级管理等现代前端开发场景。所有处理在浏览器本地完成。

预设：
层叠层（顺序：上→下，下层优先级更高）
1
:
:
2
:
:
未分层样式（优先级高于所有层）
:
预览
编辑预览 HTML
级联胜出分析
属性胜出值来源说明
background#bae6fd@layer theme后层普通声明胜出
border-radius12px未分层未分层普通声明（最高）
color#075985@layer theme后层普通声明胜出
padding16px@layer base后层普通声明胜出
生成的 CSS
/* 层声明：定义层叠顺序，后者优先级更高 */
@layer base, theme;

@layer base {
  .box {
    padding: 16px;
    background: #f1f5f9;
  }
}

@layer theme {
  .box {
    background: #bae6fd;
    color: #075985;
  }
}

/* 未分层样式：优先级高于所有 @layer 层 */
.box {
  border-radius: 12px;
}

常见问题

什么是 CSS @layer 层叠层？它解决了什么问题？

@layer（CSS 层叠层，CSS Cascading Levels Level 5）是 2022 年正式落地的原生 CSS 特性， 允许开发者把样式规则分组到具名的"层"中，并通过层声明语句显式定义层叠顺序 （如 @layer reset, base, components, utilities;，后者优先级更高）。 它解决了三大痛点：一是优先级失控，过去只能靠选择器特异性、!important、 源顺序争夺优先级，大型项目样式冲突频发；二是第三方库覆盖困难，引入 Bootstrap 等库后， 自定义样式常被库样式压制，只能堆 !important；三是主题系统难以实现， 切换主题需要精确控制覆盖关系，传统方案脆弱。@layer 让优先级从"隐式争夺"变为"显式声明"，清晰可控。

@layer 的级联优先级规则是怎样的？普通声明与 !important 有何不同？

@layer 的级联规则分两类，方向相反：
普通声明（不带 !important）：优先级从高到低为——未分层 > 后面的层 > 前面的层。 即未分层样式优先级最高，层列表中越靠后的层优先级越高。
!important 声明：优先级顺序反转——前面的层 > 后面的层 > 未分层。 即最早声明的层的 !important 优先级最高，未分层的 !important 反而最低。
这意味着：普通声明用层顺序"后来居上"，而 !important 用层顺序"先到先得"。 本工具的"级联胜出分析"会自动按此规则计算每个属性的最终胜出值并标注原因。

层声明语句 @layer name1, name2; 有什么作用？不写会怎样？

层声明语句（如 @layer reset, base, components;）用于显式定义层的顺序， 语句中越靠后的层优先级越高。它的关键作用是：即使某个层尚未填充任何规则， 也会按声明顺序占位。不写声明语句时，层会按首次出现的顺序隐式排序—— 第一个 @layer xxx { } 块成为第 1 层（优先级最低），后续块依次叠加。 建议始终在样式表开头写一条声明语句，明确顺序，避免后续新增层时顺序错乱。 本工具会自动根据层的排列顺序生成声明语句（仅含具名层）。

未分层样式（不在任何 @layer 中）的优先级为什么最高？

这是规范的有意设计：未分层样式优先级高于所有分层样式（仅指普通声明）。 原因是 @layer 的定位是"显式管理的低优先级区域"——把可预测的、希望被覆盖的样式（如第三方库、 基础重置）放进层里，把需要最终拍板的样式（如页面级覆盖、紧急修复）留在未分层区域， 确保它们总能覆盖层内样式。这种"层内 = 受控低优先级，层外 = 自由高优先级"的模型， 让开发者能精确控制哪些样式可被覆盖、哪些样式拥有最终决定权。本工具的"未分层最高"预设演示了这一行为。

如何用 @layer 隔离并覆盖第三方库（如 Bootstrap）的样式？

经典做法：把第三方库整体导入到一个低优先级层，自定义样式放在后面的层或未分层区域。 例如 @layer library, components;，把库样式放进 @layer library， 自定义组件样式放进 @layer components，由于 components 在后，优先级更高， 即使库用了高特异性选择器也能被轻松覆盖，无需 !important。 如果库本身不支持 @layer，可以用 @import "bootstrap.css" layer(library); 将其整体装入 library 层。本工具的"第三方库隔离"预设展示了这一模式。

@layer 支持嵌套层吗？framework.components 这种写法是什么？

支持。用点语法（.）命名可创建嵌套层，如 @layer framework.components { } 会创建 framework 层下的 components 子层。嵌套层的优先级规则： 子层在父层内部按声明顺序排序，父层之间的优先级仍由顶层顺序决定。 嵌套层常用于框架内部组织样式（如 framework.reset、framework.theme）， 让框架既能整体被外部覆盖（外部层在后），又能内部有序管理。本工具的"框架嵌套层"预设演示了点语法命名。

@layer 与 specificity（选择器特异性）、源顺序的关系是什么？

层优先级高于特异性——这是 @layer 最核心的价值。在 @layer 之前，级联先比较特异性， 再比较源顺序；引入 @layer 后，级联顺序变为：来源与重要性 > 层 > 特异性 > 源顺序。 即一个低特异性选择器（如 .box）在后置层中，能覆盖前置层中高特异性选择器 （如 #main .box）的样式。这让优先级管理从"堆特异性"转向"规划层结构"， 大型项目能彻底摆脱特异性战争。同一层内仍按特异性与源顺序决出胜者。

这个工具的预览安全吗？数据会上传吗？

完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 层结构编辑、级联分析、CSS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区使用 iframe 的 srcdoc 属性渲染，样式与 HTML 完全隔离在 iframe 内， 不会影响主页面样式，也不会被主页面样式污染。
- iframe 设置了 sandbox 属性限制能力，预览内容无法执行脚本、提交表单或访问父页面。
- 生成的 @layer CSS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
无需注册、无需登录、无 Cookie 追踪、无广告，适合处理任何 CSS 练习与生产场景。