花一分钟简单认识 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;
    }
}