CSSNestedDeclarations

Baseline 2024
新推出

自 2024 年 12 月起,此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在舊版裝置或瀏覽器上使用。

CSSNestedDeclarations 介面是 CSS 規則 API 的一部分,用於組合巢狀的 CSSRule

該介面允許 CSS 物件模型 (CSSOM) 映象帶有巢狀 CSS 規則的 CSS 文件結構,並確保規則按照宣告的順序被解析和評估。

注意:不支援此介面的實現可能會以錯誤的順序解析巢狀規則。有關更多資訊,請參閱 瀏覽器相容性

CSSRule CSSNestedDeclarations

例項屬性

繼承自其祖先 CSSRule 的屬性。

CSSNestedDeclarations.style 只讀

返回巢狀規則的值。

例項方法

沒有特定的方法;繼承自其祖先 CSSRule 的方法。

示例

CSS

以下 CSS 包含一個選擇器 .foo,其中包含兩個宣告和一個媒體查詢。

css
.foo {
  background-color: silver;
  @media screen {
    color: tomato;
  }
  color: black;
}

這在 CSS 物件模型 中由多個 JavaScript 物件表示。

  • 一個 CSSStyleRule 物件,表示 background-color: silver 規則。可以透過 document.styleSheets[0].cssRules[0] 返回。
  • 一個 CSSMediaRule 物件,表示 @media screen 規則,可以透過 document.styleSheets[0].cssRules[0].cssRules[0] 返回。
    • CSSMediaRule 物件包含一個 CSSNestedDeclaration 物件,該物件表示由 @media screen 規則巢狀的 color: tomato 規則。可以透過 document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0] 返回。
  • 最後一個規則是 CSSNestedDeclaration 物件,表示樣式表中的 color: black 規則,可以透過 document.styleSheets[0].cssRules[0].cssRules[1] 返回。

注意:在第一個 CSSNestedDeclaration 之後的所有頂層樣式也必須表示為 CSSNestedDeclaration 物件,以遵循 CSS 巢狀宣告規則

CSSOM (CSS 物件模型)

↳ CSSStyleRule
  .style
    - background-color: silver
  ↳ CSSMediaRule
    ↳ CSSNestedDeclarations
      .style (CSSStyleDeclaration, 1) =
      - color: tomato
  ↳ CSSNestedDeclarations
    .style (CSSStyleDeclaration, 1) =
      - color: black

規範

規範
CSS 巢狀模組
# cssnesteddeclarations

瀏覽器相容性

參見