CSSNestedDeclarations

Die CSSNestedDeclarations-Schnittstelle der CSS Rule API wird verwendet, um verschachtelte CSSRules zu gruppieren.

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

Hinweis:>Browser-Versionen, die diese Schnittstelle nicht unterstützen, könnten verschachtelte Regeln in der falschen Reihenfolge parsen.

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 folgende 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 darstellt. Dies kann über document.styleSheets[0].cssRules[0] zurückgegeben werden.
  • Ein CSSMediaRule-Objekt, das die Regel @media (screen) darstellt 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 darstellt, 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 darstellt und über document.styleSheets[0].cssRules[0].cssRules[1] zurückgegeben werden kann.

Hinweis: Alle Top-Level-Stile nach der ersten CSSNestedDeclaration müssen ebenfalls als CSSNestedDeclaration-Objekte dargestellt werden, um die CSS-Nesting-Regel zu befolgen.

CSSOM (CSS Object Model)

txt
↳ 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

BCD tables only load in the browser

Siehe auch