我們最愛的 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
的組合。這一切都令人振奮!