在 Chrome 120 中啟用類似巢狀結構。
今年稍早,Chrome 於 112 年推出 CSS 巢狀結構, 目前支援 Google 的各大瀏覽器
不過,第一項限制可能出乎意料 語法,列於無效巢狀示例的第一篇文章中。 本文將介紹規格異動以及 Chrome 的異動內容 120.
巢狀元素標記名稱
首度推出 CSS 巢狀結構,最令人驚訝的是 語法,就是無法以巢狀結構顯示裸體元素標記名稱。這種無法實現的情況有 ,因此下列 CSS 巢狀結構有效:
.card {
h1 {
/* this is now valid! */
}
}
/* the same as */
.card {
& h1 {
/* this is now valid! */
}
}
這在建立排序、未排序或定義清單的巢狀結構時顯得很甜:
dl {
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
允許這個巢狀結構發生哪些變更?
這主要得歸功於 Chrome 工程師親自探索和設計原型 加上社群和 CSS 工作小組的渴望
據以掌握 CSS 剖析器,
區分代碼名稱 (div
) 和屬性名稱 (visibility
) 為
剖析器目前還沒有任何規劃為了瞭解
符記是屬性,瀏覽器必須查看 :
產生錯誤因此,在原始規格中,&
符號是用於
向瀏覽器指出巢狀結構,而非一般的 CSS
屬性和值
幸好有工程師發現,剖析器無法剖析 如同一般使用票證,巢狀選取器可以合併為屬性 重新啟動時,會假設使用選取器而非屬性。剖析 繼續,並確認巢狀為選取器巢狀結構。速度夠快 因為這個問題足以發表這個語法。