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 貢獻者完成。