本頁面由 Cloud Translation API 翻譯而成。

CSS 巢狀

我們最愛的 CSS 預先處理工具功能之一，現已內建於「巢狀樣式規則」中。

Adam Argyle

建立巢狀結構之前，需要明確宣告每個選取器 (包括彼此呼叫這會導致重複、樣式表大量以及零散編寫無須專人管理

之前

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

建立巢狀結構之後，您可以其餘樣式規則則可歸入同一個群組。

使用後

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

在瀏覽器中試用。

巢狀結構可讓開發人員減少必須使用重複的選取器，並排顯示相關元素的樣式規則。這麼做也能讓樣式符合或目標對象指定的 HTML如果上述範例中的 .nesting 元件為您可從專案中移除，您不妨刪除整個群組，不要搜尋檔案。

Nest 產品的優點如下： - 機構 - 縮減檔案大小 - 重構

Chrome 112 提供巢狀結構功能，在 Safari 技術預覽 162 中試用。

開始使用 CSS 巢狀結構

在本文接下來的流程中，下列示範沙箱可協助您視覺化呈現所選項目在預設狀態下，系統不會選取任何項目確定所有細節都清晰可見選取各種形狀和大小後練習語法並瞭解實際運作情形

由大、小圓圈、三角形和正方形組成的彩色格線。

沙箱內部有圓形、三角形和正方形。有些是小型、中型大小則不容小覷其他則是藍色、粉紅色或紫色。全都位於.demo 包含元素以下為您準備的 HTML 元素。

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

巢狀範例

CSS 巢狀結構可以讓您在其他選取器。

.parent {
  color: blue;

  .child {
    color: red;
  }
}

在這個範例中，.child 類別選取器是巢狀結構中的 .parent 類別選取器。這表示巢狀 .child 選取器將會只會套用至具有 .parent 類別元素子項的元素。

不然也可以用 & 符號編寫此範例，明確地。

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

這兩個範例的功能相等，表示您有選擇的原因會更清楚本文介紹的進階範例。

選取社交圈

第一個例子中，工作是新增樣式去淡出，然後將圖片模糊處理圓圈中的圓圈

目前未使用巢狀結構的 CSS：

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

建立巢狀結構有兩種有效的方法：

/* & is explicitly placed in front of .circle */
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

或

/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

結果，.demo 中所有具有 .circle 類別的元素都會模糊不清且幾乎看不見：

選取任一三角形和正方形

這項工作需要選取多個巢狀元素，也稱為「群組選取器」。

目前 CSS 沒有巢狀結構，分為下列兩種：

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

或使用 :is()

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

如果是巢狀結構，以下是兩種有效的做法：

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

或

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

結果，只有 .circle 元素保留在 .demo 中：

選取大三角形和圓形

這項工作需要複合選取器，其中元素必須包含兩個類別，才能選取。

目前未使用巢狀結構的 CSS：

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

或

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

如果是巢狀結構，以下是兩種有效的做法：

.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

或

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

結果，所有大型三角形和圓形都隱藏在 .demo 中：

使用複合選取器和巢狀結構的專家級提示

& 符號是你的好友，因為其明確顯示如何加入巢狀結構選取器程式碼請參考以下範例：

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

有效的巢狀結構方式，但結果與預期不符。原因是沒有使用 & 將所需結果加總的 .lg.triangle, .lg.circle 相加時，實際結果會是 .lg .triangle, .lg .circle。子選取器。

重要詞彙：沒有 & 的巢狀類別一律會產生子系選取器。使用 & 符號即可變更計算結果。

選取所有形狀 (粉紅色以外的所有形狀)

這項工作需要否定函式虛擬類別，其中元素不得具有指定的選取器

目前未使用巢狀結構的 CSS：

.demo :not(.pink) {
  opacity: .25;
  filter: blur(25px);
}

如果是巢狀結構，以下是兩種有效的做法：

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

或

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

得出的結果，系統會將所有不是粉紅色的形狀隱藏在 .demo 中：

運用 `&` 提高準確度與靈活性

假設您想使用 :not() 選取器指定 .demo。下列項目為& 顯示：

.demo {
  &:not() {
    ...
  }
}

這會將 .demo 和 :not() 加為 .demo:not()，而非上一個範例需要 .demo :not()收到以下提醒後，想要建立巢狀結構的 :hover 互動。

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

其他巢狀結構範例

巢狀結構的 CSS 規格為也取得更多範例如果您想進一步瞭解語法當中涵蓋大量有效和無效的範例

以下幾個例子會簡單介紹 CSS 巢狀功能，瞭解這套系統提供的各種功能

建立巢狀 @media

如果移動到樣式表的其他區域，可能會很分心修改選擇器及其樣式的媒體查詢條件。讓人分心的都可以直接在內容中建立巢狀結構

為方便語法作業，如果巢狀媒體查詢只會修改樣式，則可以使用最少的語法。

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

也可以明確使用 &：

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

本範例顯示使用 & 的展開語法，同時指定 .large 資訊卡，展現其他巢狀功能仍可繼續運作。

進一步瞭解巢狀結構 @rules。

隨處建立巢狀結構

到目前為止的所有範例都仍繼續或附加至先前的內容。您可以視需要徹底變更或重新排列情境。

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

& 符號代表選取器物件 (非字串) 的參照，可放在巢狀選取器中的任何位置甚至可以放置在時間：

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

雖然這個例子不太實用，但在某些情況下可重複選取選取器背景是很方便的做法

無效的巢狀範例

有幾個巢狀結構語法無效，可能會讓您產生驚訝如果您已在預先處理器中建立巢狀結構

巢狀與串連

許多 CSS 類別命名慣例會影響巢狀結構，附加選擇器，就像是字串一樣。這不適用於以選取器並非字串，而是物件參照。

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

如需更詳盡的說明，請參閱規格說明。

模擬巢狀結構示例

在選取器清單和 `:is()` 中以巢狀方式處理

請考慮使用下列巢狀 CSS 區塊：

.one, #two {
  .three {
    /* some styles */
  }
}

以上第一個範例是從選取器清單開始，然後繼續巢狀。先前的範例只使用選取器清單結束。這個巢狀範例中沒有任何無效項目，但關於建立選取器清單 (尤其是含有 ID 選取器的巢狀結構)，可能會有棘手的實作詳細說明。

為了讓巢狀結構順利運作，任何不是最內部巢狀的選取器清單都會在瀏覽器加上 :is() 包裝。這項包裝可在任何已編寫的結構定義中，將選取器清單分組。此群組 (:is(.one, #two)) 的副作用是採用括號內選取器內最高分數的確切程度。這是 :is() 一直以來的運作方式，但使用巢狀語法時可能會感到意外，因為這與編寫的資訊並不完全相同。秘訣總結如為 ID 和選取器清單建立巢狀結構，可能會導致選取範圍非常精確。

在此快速總結一下，先前的巢狀結構區塊將套用至文件，如下所示：

:is(.one, #two) .three {
  /* some styles */
}

如果在使用 ID 選取器的選取器清單建立巢狀結構，請留意或教導 Linter 發出警示，該選取器清單內所有巢狀結構的明確程度都會較高。

混用巢狀和宣告

請考慮使用下列巢狀 CSS 區塊：

.card {
  color: green;
  & { color: blue; }
  color: red;
}

.card 元素的顏色將是 blue。

任何不雅樣式宣告都會提升至頂端，就像這麼做：。詳情請參閱規格。

方法有很多，以下程式碼會納入 & 中的三種顏色樣式，會保留串列順序 (如同作者可能的目標)。圖表的顏色 .card 元素會呈現紅色。

.card {
  color: green;
  & { color: blue; }
  & { color: red; }
}

事實上，建議您納入任何依附 & 巢狀結構的樣式。

.card {
  color: green;

  @media (prefers-color-scheme: dark) {
    color: lightgreen;
  }

  & {
    aspect-ratio: 4/3;
  }
}

特徵偵測

有兩種方式可以偵測 CSS 巢狀結構：使用巢狀結構或使用 @supports 可檢查巢狀選取器剖析功能。

Bramus 的 Codepen 示範影片的螢幕截圖，詢問你的瀏覽器是否支援
如為 CSS 巢狀結構問題下方是一個綠色方塊，表示願意提供支援。

使用巢狀結構：

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

使用 @supports：

@supports (selector(&)) {
  /* nesting parsing available */
}

我的同事 Bramus 有一個絕佳的 Codepen，以展示這項策略。

使用 Chrome 開發人員工具偵錯

開發人員工具目前的巢狀結構支援最少。您目前可「Styles」窗格中的樣式會如預期顯示，但會勾勒巢狀結構的且尚不支援其完整的選取器內容我們有設計和計畫而非公開透明

Chrome 開發人員工具巢狀語法的螢幕截圖。

Chrome 113 預計提供更多 CSS 巢狀結構支援。敬請期待！

未來

CSS 巢狀結構目前僅為第 1 版。第 2 版將推出更多語法糖，並可能減少其實要剖析巢狀結構有很多需求也可能是某些關鍵時刻

巢狀結構對 CSS 語言來說是一大進步。會影響程式碼編寫 CSS 的幾乎每個架構層面我們必須深入研究才能有效地指明第 2 版之前的版本。

最後，歡迎觀看這部示範影片兩者同時使用 @scope、巢狀和 @layer。這一切都令人振奮！

灰色背景上的淺色資訊卡。資訊卡有標題和文字
一些動作按鈕，以及網路龐克風格的圖片

CSS 巢狀

開始使用 CSS 巢狀結構

巢狀範例

選取社交圈

選取任一三角形和正方形

選取大三角形和圓形

使用複合選取器和巢狀結構的專家級提示

選取所有形狀 (粉紅色以外的所有形狀)

運用 & 提高準確度與靈活性

其他巢狀結構範例

建立巢狀 @media

隨處建立巢狀結構

無效的巢狀範例

巢狀與串連

模擬巢狀結構示例

在選取器清單和 :is() 中以巢狀方式處理

混用巢狀和宣告

特徵偵測

使用 Chrome 開發人員工具偵錯

未來

運用 `&` 提高準確度與靈活性

在選取器清單和 `:is()` 中以巢狀方式處理