CSSNestedDeclarations

Baseline 2023
Newly available

Since December 2023, 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 dem CSS Object Model (CSSOM, die Struktur von CSS-Dokumenten mit verschachtelten CSS-Regeln zu spiegeln und sicherzustellen, dass Regeln in der Reihenfolge analysiert und ausgewertet werden, in der sie deklariert werden.

Hinweis: Implementierungen, die dieses Interface nicht unterstützen, könnten verschachtelte Regeln in der falschen Reihenfolge analysieren. Siehe Browser-Kompatibilität für weitere 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

Das unten stehende CSS 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 background-color: silver Regel repräsentiert. Dies kann über document.styleSheets[0].cssRules[0] zurückgegeben werden.
  • Ein CSSMediaRule Objekt, das die @media (screen) Regel 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 color: tomato Regel repräsentiert, die in der @media (screen) Regel 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 color: black Regel 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 ebenfalls als CSSNestedDeclaration Objekte dargestellt werden, um der CSS-Nested-Declarations-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
# cssnesteddeclarations

Browser-Kompatibilität

Siehe auch