CSS 中比通配符 * 优先级还低的选择器 @layer 神奇用法

本文源之于之前使用 tailwindcss 4 的一次神奇发现：新版本的 tailwindcss 写出来的样式优先级居然无法覆盖 reset.css 中的样式属性，也是折腾得够呛！！

以上 tailwindcss flex 选择器定义的样式明显比 * 定义的样式优先级还低，究其根本原因，就是因为那个 级联层 utilities~~

学 CSS 之前，应该都见过一个选择器优先级的表格，大概长这样：

这里可以明确的看到，通配符 * 的样式优先级最低，其他选择器的优先级都比他高！然而 CSS 2023 草案纳入了一个新的规范 @layer，它允许写出比 * 优先级更低的 CSS 样式~~

咱又长见识了！！

@layer

此玩意儿有点新，对于浏览器兼容性要求比较高的项目就别尝试了：

Chrome 也是 2022 年才开始支持 @layer，也就是说 tailwindcss 4 的兼容性差不多也是这样！

基础用法

手搓一个比通配符选择器优先级还低的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14<div class="box">  测试内容
</div>
<style>  * {
    padding: 0;
  }  @layer base {
    .box {
      padding: 10px    }
  }
</style>

上面代码的内边距 10px 虽然是写在类选择器中，但由于 @layer 包裹，会导致其比 * 优先级还低，内边距并不会生效：

虽然 @layer 定义的样式比通配符选择器低，但它还是比浏览器默认的样式优先级高，夹在默认样式和选择器之间的一个优先级！

定义命名 @layer

@layer 允许在使用之前优先定义层级关系，从而控制样式优先级：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<div class="box">  公众号：前端路引测试内容
</div>
<style>  @layer a,b,c; /* 定义层级关系 */  @layer c {
    .box {
      padding: 30px    }
  }
  /* layer 可以随处书写 */  @layer a {
    .box {
      padding: 15px    }
  }
  @layer b {
    .box {
      padding: 20px    }
  }
  /* layer 可以随处书写 */  @layer a {
    .box {
      padding: 10px    }
  }
</style>

猜一猜上面的那个样式会被应用？按照常规逻辑，同样的样式优先级，写在后面的比写在前面的优先级更高，理论上应该是 10px 会生效，然而并不是：

原因就是顶部的 @layer a,b,c; 这一行代码声明优先级，a 的优先级最低，其次才是 b、c！！如果注释掉这行代码，那么就是谁在后面谁的优先级更高。

命名层级关系必须在使用之前定义，先使用了样式再定义层级关系是无效的。比如说这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16@layer c {
  .box {
    padding: 30px  }
}
@layer b {
  .box {
    padding: 20px  }
}
@layer a {
  .box {
    padding: 10px  }
}
@layer a,b,c; /* 后定义层级关系无效！ */

嵌套

跟 CSS 选择器一样，@layer 也支持嵌套写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14<div class="box">  公众号：前端路引测试内容
</div>
<style>  @layer a {
    @layer b {}
  }
  @layer a.b {
    .box {
      padding: 10px    }
  }
</style>

效果：

一个多层嵌套层的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<div class="box">  公众号：前端路引测试内容
</div>
<style>  @layer a {
    @layer d {
      .box {
        padding: 10px      }
    }
    @layer b, c;
    @layer f;
  }
  @layer a.c {
    .box {
      padding: 20px    }
  }
  @layer a.b {
    .box {
      padding: 30px    }
  }
  @layer a.f {
    .box {
      padding: 40px    }
  }
</style>

效果：

匿名层

在使用 @layer 如果不想指定一个名称，也是允许的，比如这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<div class="box">  公众号：前端路引测试内容
</div>
<style>  * {
    padding: 30px;
  }  @layer a.b {
    .box {
      padding: 20px    }
  }
  @layer { /*匿名层*/    .box {
      padding: 10px    }
  }
</style>

效果：

虽然层是匿名了，但是优先级还是比 * 更低，其次才是与 @layer 的书写顺序有关！

@import

@import 都知道可以用于引用外部 CSS 文件，引入的样式内容也可以指定 layer 层，用法长这样：

1
2
3<style>  @import './base.css' layer(base);
</style>

效果：

!important

!important 对 layer 中定义的样式还是能提升其优先级为顶级，比如这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14<div class="box">  公众号：前端路引测试内容
</div>
<style>  * {
    padding: 0;
  }  @layer base {
    .box {
      padding: 10px !important;
    }  }
</style>

效果：