& 巢狀選擇器

Baseline 2023

新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在較舊的裝置或瀏覽器上使用。

CSS & 巢狀選擇器 在使用 CSS 巢狀時，明確地說明了父規則和子規則之間的關係。它使得巢狀的子規則選擇器相對於父元素。如果沒有 & 巢狀選擇器，子規則選擇器會選擇子元素。子規則選擇器的特異性權重與它們在 :is() 中時的權重相同。

注意： 子規則 不意味著 子元素選擇器。子規則可以根據是否使用 & 巢狀選擇器來針對父元素或子元素。

如果不在巢狀樣式規則中使用，& 巢狀選擇器代表作用域根。

語法

css

parentRule {
  /* parent rule style properties */
  & childRule {
    /* child rule style properties */
  }
}

`&` 巢狀選擇器和空格

考慮以下在沒有 & 巢狀選擇器的情況下進行巢狀的程式碼。

css

.parent-rule {
  /* parent rule properties */
  .child-rule {
    /* child rule properties */
  }
}

當瀏覽器解析巢狀選擇器時，它會自動在選擇器之間新增空格，以建立新的 CSS 選擇器規則。以下程式碼顯示了等效的非巢狀規則

css

.parent-rule {
  /* parent rule style properties */
}

.parent-rule .child-rule {
  /* style properties for .child-rule descendants for .parent-rule ancestors */
}

當巢狀規則需要（沒有空格）附加到父規則時，例如使用 偽類 或建立複合選擇器時，必須立即在前面加上 & 巢狀選擇器才能達到預期效果。

考慮一個示例，我們想要樣式化一個元素，提供始終應用的樣式，並且還巢狀一些僅在懸停時應用的樣式。如果未包含 & 巢狀選擇器，則會新增空格，最終得到一個規則集，該規則集將巢狀樣式應用於父規則選擇器的任何懸停後代。然而，這並不是我們想要的。

css

.parent-rule {
  /* parent rule properties */
  :hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule *:hover {
  /* child rule properties */
}

在沒有空格的情況下新增 & 巢狀選擇器後，父規則匹配的元素在懸停時將被樣式化。

css

.parent-rule {
  /* parent rule properties */
  &:hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule:hover {
  /* child rule properties */
}

附加 `&` 巢狀選擇器

& 巢狀選擇器也可以附加到後面，以反轉規則的上下文。

css

.card {
  /* .card styles */
  .featured & {
    /* .featured .card styles */
  }
}

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card {
  /* .featured .card styles */
}

& 巢狀選擇器可以放置多次

css

.card {
  /* .card styles */
  .featured & & & {
    /* .featured .card .card .card styles */
  }
}

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

不能表示偽元素

& 選擇器等同於 :is() 選擇器，並且具有相同的限制，即它不能表示偽元素。

例如，對於以下樣式規則，即使巢狀在 <div class="important"> 中，也不會將任何生成的文字樣式化為紅色，因為 .important :is(.foo::before) 無法匹配任何內容。

css

.foo::before {
  content: "Hello";

  .important & {
    color: red;
  }
}

此限制也適用於巢狀 @ 規則，其屬性隱式地包裹在 & 選擇器中。例如，對於以下規則，即使在小螢幕上，也不會將任何生成的文字樣式化為紅色，因為 color: red 屬性隱式地包裹在 & 選擇器中，在本例中為 :is(.foo::before)。

css

.foo::before {
  content: "Hello";

  @media (width < 600px) {
    color: red;
  }
}

示例

以下兩個示例產生相同的輸出。第一個使用普通的 CSS 樣式，第二個使用 & 巢狀選擇器。

使用普通 CSS 樣式

此示例使用普通 CSS 樣式。

HTML

html

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

css

.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}

結果

在巢狀 CSS 樣式中使用 `&`

此示例使用巢狀 CSS 樣式。

HTML

html

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

css

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

結果

在巢狀規則之外使用 `&`

如果不在巢狀樣式規則中使用，& 巢狀選擇器代表作用域根。

html

<p>Hover over the output box to change document's background color.</p>

css

& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

結果

在這種情況下，所有樣式都適用於文件。

規範

規範
CSS 巢狀模組 # nest-selector

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 7 月 27 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題