我們最愛的 CSS 預先處理工具功能之一，現已內建於「巢狀樣式規則」中。
在建立巢狀結構之前，需要明確宣告每個選取器，彼此之間都必須分開宣告。這會造成重複、樣式表大量，以及零散的編寫體驗。
.nesting {
color: hotpink;
}
.nesting > .is {
color: rebeccapurple;
}
.nesting > .is > .awesome {
color: deeppink;
}
建立巢狀結構後，即可繼續選取選取器，並把選取規則的相關樣式規則分組。
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
巢狀結構可協助開發人員減少需要重複的選取器，同時將相關元素的樣式規則設為共置。此外，樣式也有助於
與指定的 HTML 相符如果上述範例中的 .nesting 元件已從專案中移除，您可以刪除整個群組，而不是搜尋相關選取器執行個體的檔案。
巢狀結構的優點如下： - 機構 - 縮減檔案大小 - 重構
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 類別命名慣例都考量到巢狀結構，能串連或附加選取器，就像這些選取器是字串一樣。這在 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 來檢查巢狀選取器剖析功能。
使用巢狀結構：
html {
.has-nesting {
display: block;
}
.no-nesting {
display: none;
}
}
使用 @supports：
@supports (selector(&)) {
/* nesting parsing available */
}
我的同事 Bramus 有一個絕佳的 Codepen，以展示這項策略。
使用 Chrome 開發人員工具偵錯
開發人員工具目前的巢狀結構支援最少。目前，「樣式」窗格中會正常顯示樣式，但尚不支援追蹤巢狀結構及其完整的選取器結構定義。我們有設計和計畫 要確保產品資訊公開透明
Chrome 113 預計提供更多 CSS 巢狀結構支援。敬請期待！
日後規劃
CSS 巢狀結構目前僅為 1 版。 第 2 版將推出更多語法糖，並可能減少需要記憶的規則。要剖析巢狀結構，有很多需求是不會受到限製或錯綜複雜。
巢狀結構對 CSS 語言來說是一大進步。而且編寫了 CSS 對所有架構層面的影響您必須先深入探索和瞭解這些重大影響，才能有效指明版本 2。
最後，這裡的示範使用了 @scope、巢狀和 @layer 的組合。這一切都令人振奮！
