详解 css 新特性 级联层@layer
最新回答
晨曦慕雪
2026-01-21 19:03:44
级联层的执行顺序遵循定义顺序。最终执行的是c层的规则，得到蓝色的div，即便b层是id选择器，最终仍遵循最后级联层生效的原则。级联层的顺序为@layer c > @layer b > @layer a。
级联层引用有三种方式。可以直接创建@layer规则，包含作用于该层的CSS规则。
在比较非@layer包裹层与@layer层内样式时，非@layer包裹的样式具有更高优先级。最终样式为绿色，排序为：未被@layer包裹的样式 > @layer C > @layer B > @layer A。
级联层规则可以简单命名，也可以设置匿名与嵌套使用方式。匿名层允许创建无名@layer，其两个重要特性体现在最终样式优先级。在嵌套层中，可以在@layer内部再嵌套使用@layer级联层。单个@layer内部的嵌套关系中，样式优先级为@layer A > @layer A.B。
在应用!important于CSS@layer时，最终展示优先级更高的样式。在比较场景中，非级联层和@layer A中添加!important，最终显示蓝色。这意味着在比较!important规则时，越是级联层靠后的规则，优先级越高。!important在比较时遵循特定规则。
热门标签
