我們最愛的 CSS 預先處理工具功能之一,現已內建於「巢狀樣式規則」中。
建立巢狀結構之前,需要明確宣告每個選取器 (包括 彼此呼叫這會導致重複、樣式表大量以及零散編寫 無須專人管理
.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
類別的元素都會
模糊不清且幾乎看不見:
![彩色格線不再有圓形,
但在背景播放時非常模糊](https://developer.chrome.google.cn/static/docs/css-ui/css-nesting/image/the-colorful-grid-shapes-f1beac5a4a5be.png?authuser=19&hl=zh-tw)
選取任一三角形和正方形
目前 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
中:
![彩色形狀方格只剩下一個圓圈,
但所有其他形狀都幾乎看不見](https://developer.chrome.google.cn/static/docs/css-ui/css-nesting/image/the-colorful-grid-shapes-5baea09e41652.png?authuser=19&hl=zh-tw)
選取大三角形和圓形
這項工作需要複合選取器,其中 元素必須包含兩個類別,才能選取。
目前未使用巢狀結構的 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
中:
![彩色格線只會顯示中小型圖案,](https://developer.chrome.google.cn/static/docs/css-ui/css-nesting/image/the-colorful-grid-has-sm-5a9e56b5c62b4.png?authuser=19&hl=zh-tw)
使用複合選取器和巢狀結構的專家級提示
&
符號是你的好友,因為其明確顯示如何加入巢狀結構
選取器程式碼請參考以下範例:
.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
中:
![彩色格線現在是單色,只顯示粉紅色的形狀。](https://developer.chrome.google.cn/static/docs/css-ui/css-nesting/image/the-colorful-grid-is-mon-0203fb32e8aea.png?authuser=19&hl=zh-tw)
運用 &
提高準確度與靈活性
假設您想使用 :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
可檢查巢狀選取器剖析功能。
使用巢狀結構:
html {
.has-nesting {
display: block;
}
.no-nesting {
display: none;
}
}
使用 @supports
:
@supports (selector(&)) {
/* nesting parsing available */
}
我的同事 Bramus 有一個絕佳的 Codepen,以展示這項策略。
使用 Chrome 開發人員工具偵錯
開發人員工具目前的巢狀結構支援最少。您目前可 「Styles」窗格中的樣式會如預期顯示,但會勾勒巢狀結構的 且尚不支援其完整的選取器內容我們有設計和計畫 而非公開透明
Chrome 113 預計提供更多 CSS 巢狀結構支援。敬請期待!
未來
CSS 巢狀結構目前僅為第 1 版。 第 2 版將推出更多語法糖,並可能減少 其實要剖析巢狀結構有很多需求 也可能是某些關鍵時刻
巢狀結構對 CSS 語言來說是一大進步。會影響程式碼編寫 CSS 的幾乎每個架構層面我們必須深入研究 才能有效地指明第 2 版之前的版本。
最後,歡迎觀看這部示範影片
兩者同時使用 @scope
、巢狀和 @layer
。這一切都令人振奮!