CSS 巢狀結構放寬語法更新

在 Chrome 120 中啟用類似巢狀結構。

Adam Argyle
Adam Argyle
X GitHub

今年稍早，Chrome 於 112 年推出 CSS 巢狀結構， 目前支援 Google 的各大瀏覽器

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：117。
  • Safari：17.2。

資料來源

不過，第一項限制可能出乎意料 語法，列於無效巢狀示例的第一篇文章中。 本文將介紹規格異動以及 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 屬性和值

幸好有工程師發現，剖析器無法剖析 如同一般使用票證，巢狀選取器可以合併為屬性 重新啟動時，會假設使用選取器而非屬性。剖析 繼續，並確認巢狀為選取器巢狀結構。速度夠快 因為這個問題足以發表這個語法。