花一分钟简单认识 CSS 中的规则 —— 级联层 @layer

@layer 简介：

• 声明级联层时，越靠后优先级越高。
• 不属于任何级联层的样式，将自成一层匿名级联层，并置于所有层之后 —— 级别最高。

用法一：在同一文件中

@layer base, special;
@layer special {/* 优先 */li { color: red; }
}
@layer base {div>ul>li { color: green; }
}

用法二：为文件声明优先级，

@import "base.css" layer(base);
@import "special.css" layer(special); /* 优先 */

用法三：嵌套级联层

@layer framework {li {color: red; /* 优先 */}@layer layout {div>ul>li {color: green;}}
}

其中被嵌套的子级联层可以通过 . 来访问，所以上面代码也可以写成下面这样：

@layer framework {@layer layout {}
}
@layer framework {li {color: red; /* 优先 */}
}
@layer framework.layout {div>ul>li {color: green;}
}

小案例

@layer base, special;@layer special {p {color: red;}
}
@layer base {p#id {color: green;}
}