CSSNestedDeclarations

Baseline 2024

Newly available

Since ⁨December 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Das Interface ermöglicht es, dass das CSS Object Model (CSSOM die Struktur von CSS-Dokumenten mit verschachtelten CSS-Regeln widerspiegelt, und stellt sicher, dass Regeln in der Reihenfolge analysiert und ausgewertet werden, in der sie deklariert sind.

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

Instanz-Eigenschaften

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 das ü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 Ebenenstile nach der ersten CSSNestedDeclaration müssen ebenfalls 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