CSS 的 @layer 可以先给样式分层，再决定层与层之间的覆盖顺序。比如声明 @layer reset, base, components, utili… · @BaiBtw · TwKit

@BaiBtw

CSS 的 @layer 可以先给样式分层，再决定层与层之间的覆盖顺序。比如声明 @layer reset, base, components, utilities;，同一来源的普通声明发生冲突时，后面的层优先；跨层比较时，选择器写得更复杂也不会改变这个顺序。 例如 components 层里的 .ui-button 把背景设成蓝色，utilities 层里的 .bg-red-500 设成红色，一个按钮同时带这两个类，最终会显示红色。同一层内部仍要比较选择器优先级等规则。 层的顺序在首次声明时确定。后面再次写 @layer components { ... }，只是往已有层追加规则，不会把它挪到最后。也可以用 @import "theme.css" layer(utilities); 把整个样式表放进指定层。 有两个容易弄反的地方：同一来源下，没有放进任何层的普通声明，优先于所有层内的普通声明；加了 !important 后，层之间的顺序反过来，先声明的层优先，而且层内的重要声明优先于层外的重要声明。

曝光 2 · 评论 0 · 点赞 0 · 书签 0