CSS 嵌套与优先级

& 嵌套选择器的优先级由它所关联的选择器列表当中优先级最高的选择器决定。这与 :is() 函数的优先级计算方式一致。

html
<b class="foo">
  <c>蓝色文字</c>
</b>

& 嵌套语法

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

.foo c {
  color: red;
}

:is() 语法

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

.foo c {
  color: red;
}

在这个示例中，ID 选择器（#a）的优先级是 1-0-0，而类型选择器（b）的优先级是 0-0-1。& 嵌套选择器和 :is() 伪类均有 1-0-0 的优先级，尽管 ID 选择器 #a 从未使用。

类选择器 .foo 的优先级是 0-1-0。经过计算得出，& c 的总优先级是 1-0-1，而 .foo c 的优先级是 0-1-1，意味着 color: blue; 是最后赢家。

参见