Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
CSSNestedDeclarations
Baseline 2024Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
DieCSSNestedDeclarations Schnittstelle derCSS Rule API wird verwendet, um verschachtelteCSSRules zu gruppieren.
Die Schnittstelle ermöglicht es demCSS Object Model (CSSOM, die Struktur von CSS-Dokumenten mit verschachtelten CSS-Regeln widerzuspiegeln und sicherzustellen, dass Regeln in der Reihenfolge geparst und ausgewertet werden, in der sie deklariert sind.
Hinweis:Implementierungen, die diese Schnittstelle nicht unterstützen, können verschachtelte Regeln in der falschen Reihenfolge parsen.SieheBrowser-Kompatibilität für weitere Informationen.
Instanzeigenschaften
Erbt Eigenschaften von seinem VorfahrenCSSRule.
CSSNestedDeclarations.styleSchreibgeschütztGibt die Werte der verschachtelten Regeln zurück.
Instanzmethoden
Keine spezifischen Methoden; erbt Methoden von seinem VorfahrenCSSRule.
Beispiele
CSS
Das folgende CSS enthält einen Selektor.foo, der zwei Deklarationen und eine Medienabfrage enthält.
.foo { background-color: silver; @media screen { color: tomato; } color: black;}Dies wird durch mehrere JavaScript-Objekte imCSS Object Model dargestellt:
- Ein
CSSStyleRuleObjekt, das die Regelbackground-color: silverdarstellt.Dies kann überdocument.styleSheets[0].cssRules[0]zurückgegeben werden. - Ein
CSSMediaRuleObjekt, das die Regel@media screendarstellt, und welches überdocument.styleSheets[0].cssRules[0].cssRules[0]zurückgegeben werden kann.- Das
CSSMediaRuleObjekt enthält einCSSNestedDeclarationObjekt, welches die Regelcolor: tomato, verschachtelt durch die Regel@media screen, darstellt.Dies kann überdocument.styleSheets[0].cssRules[0].cssRules[0].cssRules[0]zurückgegeben werden.
- Das
- Die letzte Regel ist ein
CSSNestedDeclarationObjekt, das die Regelcolor: blackim Stylesheet darstellt und welches überdocument.styleSheets[0].cssRules[0].cssRules[1]zurückgegeben werden kann.
Hinweis:Alle Top-Level-Stile nach der erstenCSSNestedDeclaration müssen ebenfalls alsCSSNestedDeclaration Objekte dargestellt werden, um derCSS verschachtelte Deklarationen Regel zu folgen.
CSSOM (CSS Object Model)
↳ CSSStyleRule .style - background-color: silver ↳ CSSMediaRule ↳ CSSNestedDeclarations .style (CSSStyleDeclaration, 1) = - color: tomato ↳ CSSNestedDeclarations .style (CSSStyleDeclaration, 1) = - color: black
Spezifikationen
| Specification |
|---|
| CSS Nesting Module Level 1 # cssnesteddeclarations |