什么是级联层（@layer）和 :is/:where 选择器？

Question

Accepted Answer

这些功能让你对 **cascade**（级联）和 **specificity**（特异性）进行明确控制——直接解决大型代码库中的特异性战争问题。

## @layer — 明确的级联顺序

`@layer` 让你定义命名的层，其顺序 *由你* 控制。较后层中的样式会击败较早层中的样式，**不受特异性影响**：

```css
@layer reset, base, components, utilities; /* declare order: later = higher priority */

@layer base {
  a { color: blue; }            /* even though this is defined... */
}
@layer components {
  .link { color: green; }       /* ...this wins because `components` > `base`, */
}                                /* even though .link isn't more specific by itself */
```

强大之处在于：高层中的低特异性工具类可以覆盖低层中的高特异性规则。这意味着你再也不需要 `!important` 或选择器技巧来管理覆盖顺序——你将 CSS 组织成层（reset → framework → components → overrides），顺序是可预测的。

## :where() — 零特异性

```css
:where(.a, .b, .c) p { color: red; } /* specificity contribution: 0,0,0 */
```

`:where()` 匹配其参数但不添加 **任何特异性**——完美用于默认样式/重置，任何人都可以轻松覆盖：

```css
:where(ul) { margin: 0; } /* a reset that ANY later rule beats effortlessly */
```

## :is() — 相同匹配，采用最高特异性

```css
:is(h1, h2, h3) a { } /* matches the same elements, but specificity = the most specific arg */
```

`:is()` 缩短长选择器列表（如 `:where()`），但 **确实** 贡献特异性（其最具体参数的特异性）。所以当你想要正常权重时使用 `:is()`；当你希望它可被覆盖时使用 `:where()`。

## :is 对比 :where

```css
:is(#id, .class) p { }   /* specificity: 1,0,0 (the #id counts) */
:where(#id, .class) p { }/* specificity: 0,0,0 (always zero) */
```

## 为什么这很重要

这些选择器一起解决了 CSS 最难的维护问题——**不受控的特异性**。`@layer` 使覆盖顺序明确且有意图（不再有 `!important` 升级战），`:where()` 编写永远不会与你冲突的重置/默认样式，`:is()` 保持复杂选择器 DRY。

它们是可扩展、框架友好的 CSS 架构的基础工具。