CSS 层叠层速查

对照 @layer 的各类语法与层叠层(cascade layers)优先级顺序,区分声明顺序、具名层、匿名层、@import layer() 与 revert-layer 等写法,支持关键词过滤、优先级高亮与一键复制示例代码,全部在浏览器本地完成。

语法对照表 共 6 条语法
语法 说明 用途

过滤器会同时匹配语法、说明与用途,点击表格行可查看优先级高亮与示例代码。

层叠层优先级预览
components 优先级最高(后声明的具名层)
theme 优先级居中
base 优先级最低(先声明的具名层)

同一属性发生冲突时,越靠上的层越优先;未放入任何层的样式优先级最高。

当前语法@layer base, theme, components;
涉及层base / theme / components
优先级components 最高
胜出规则components

高亮的层表示当前语法涉及或改变优先级的层。

示例代码

          

复制后可直接粘贴到样式表顶部,按需调整层名。

使用规则
  • 建议在样式表顶部用 @layer a, b, c; 一次性声明层顺序,避免顺序随写法变化。
  • 不带 @layer 的普通样式优先级高于所有分层样式,适合作为兜底覆盖。
  • 层内样式的优先级仍由选择器权重与书写顺序决定,层只解决层与层之间的比较。
  • !important 会反转层优先级:层中靠前的 !important 声明反而优先。
  • @layer 在主流现代浏览器中均已支持,旧版浏览器会忽略整个规则块。