CSSNestedDeclarations
CSSNestedDeclarations 介面是 CSS 規則 API 的一部分,用於組合巢狀的 CSSRule。
該介面允許 CSS 物件模型 (CSSOM) 映象帶有巢狀 CSS 規則的 CSS 文件結構,並確保規則按照宣告的順序被解析和評估。
注意:不支援此介面的實現可能會以錯誤的順序解析巢狀規則。有關更多資訊,請參閱 瀏覽器相容性。
例項屬性
繼承自其祖先 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 |
瀏覽器相容性
載入中…