CSS 嵌套与特异性

& 嵌套选择器的特异性是使用关联选择器列表中最大的特异性来计算的。这与使用 :is() 函数时计算特异性的方式相同。

html

<b class="foo">
  <i>Blue text</i>
</b>

`&` 嵌套语法

css

#a, b {
  & i {
    color: blue;
  }
}

.foo i {
  color: red;
}

css

:is(#a, b) {
  & i {
    color: blue;
  }
}

.foo i {
  color: red;
}

在这个例子中，id 选择器（#a）的特异性是 1-0-0，而类型选择器（b）的特异性是 0-0-1。& 嵌套选择器和 :is() 伪类都采用 1-0-0 的特异性，即使 #a id 选择器从未使用过。

.foo 类选择器的特异性是 0-1-0。这使得 & i 的总特异性为 1-0-1，而 .foo i 的总特异性为 0-1-1，这意味着 color: blue; 获胜。

本页面最后修改于 2025 年 7 月 14 日，由 MDN 贡献者完成。