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.

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 widerzuspiegeln und sicherzustellen, dass Regeln in der Reihenfolge geparst und ausgewertet werden, in der sie deklariert sind.

Hinweis: Implementierungen, die diese Schnittstelle nicht unterstützen, können verschachtelte Regeln in der falschen Reihenfolge parsen. Siehe Browser-Kompatibilität für weitere Informationen.

Instanzeigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSRule.

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

Instanzmethoden

Keine spezifischen Methoden; erbt Methoden von seinem Vorfahren CSSRule.

Beispiele

CSS

Das folgende 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 mehrere JavaScript-Objekte 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 welches über document.styleSheets[0].cssRules[0].cssRules[0] zurückgegeben werden kann.
- Das CSSMediaRule Objekt enthält ein CSSNestedDeclaration Objekt, welches die Regel color: tomato, verschachtelt durch die Regel @media screen, darstellt. 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 welches ü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 verschachtelte Deklarationen 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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden