CSSNestedDeclarations

Baseline 2024

Neu verfügbar

Seit Dezember 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Das CSSNestedDeclarations-Interface der CSS Rule API wird verwendet, um verschachtelte CSSRules zu gruppieren.

Das Interface ermöglicht es dem CSS Object Model (CSSOM), die Struktur von CSS-Dokumenten mit verschachtelten CSS-Regeln abzubilden und sicherzustellen, dass Regeln in der Reihenfolge geparst und ausgewertet werden, in der sie deklariert sind.

Hinweis: Implementierungen, die dieses Interface nicht unterstützen, könnten verschachtelte Regeln in der falschen Reihenfolge parsen. Siehe Browser-Kompatibilität für mehr Informationen.

Instanzeigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSRule.

CSSNestedDeclarations.style Schreibgeschützt: Gibt die Werte der verschachtelten Regeln zurück.

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

Dies wird durch eine Anzahl von JavaScript-Objekten im CSS Object Model dargestellt:

Ein CSSStyleRule-Objekt, das die Regel background-color: silver repräsentiert. Dies kann über document.styleSheets[0].cssRules[0] zurückgegeben werden.
Ein CSSMediaRule-Objekt, das die Regel @media screen repräsentiert und über document.styleSheets[0].cssRules[0].cssRules[0] zurückgegeben werden kann.
- Das CSSMediaRule-Objekt enthält ein CSSNestedDeclaration-Objekt, das die Regel color: tomato repräsentiert, die durch die Regel @media screen verschachtelt ist. Dies kann über document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0] zurückgegeben werden.
Die letzte Regel ist ein CSSNestedDeclaration-Objekt, das die Regel color: black im Stylesheet repräsentiert und über document.styleSheets[0].cssRules[0].cssRules[1] zurückgegeben werden kann.

Hinweis: Alle top-level Stile nach der ersten CSSNestedDeclaration müssen auch als CSSNestedDeclaration-Objekte dargestellt werden, um der CSS-Regel für verschachtelte Deklarationen zu folgen.

CSSOM (CSS Object Model)

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