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.

CSSRule CSSNestedDeclarations

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSRule.

CSSNestedDeclarations.style Schreibgeschützt

Gibt die Werte der verschachtelten Regeln zurück.

Instanz-Methoden

Keine spezifischen Methoden; erbt Methoden von seinem Vorfahren CSSRule.

Beispiele

CSS

Der unten stehende CSS-Code enthält einen Selektor .foo, der zwei Deklarationen und eine Medienabfrage enthält.

css
.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

Spezifikationen

Specification
CSS Nesting Module
# cssnesteddeclarations

Browser-Kompatibilität

Siehe auch