CSS 嵌套和特异性

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

html

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

`&` 嵌套语法

css

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

.foo c {
  color: red;
}

css

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

.foo c {
  color: red;
}

在此示例中，id 选择器 (#a) 的特异性为 1-0-0，而类型选择器 (b) 的特异性为 0-0-1。& 嵌套选择器和 :is() 伪类都采用 1-0-0 的特异性，即使从未使用 #a id 选择器。

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