CSS @scope Regel

Definition und Verwendung

CSS @scope Die Regel ermöglicht es Ihnen, Elemente in einem bestimmten DOM-Unterbau auszuwählen.

Mit dieser @-Regel können Sie Elemente präzise定位, ohne zu spezifische Selectoren zu schreiben.

Diese @-Regel reduziert auch die Kopplung zwischen dem Selector und der DOM-Struktur.

Beispiel

Beispiel 1

Hier verwenden wir zwei unabhängige @scope Ein Block wird verwendet, um die <a>-Elemente in den Klassen .ex1 und .ex2 zu matchen.:scope wird verwendet, um den Stil des Kontexts selbst auszuwählen und zu setzen. In diesem Beispiel ist der Kontexts-Root der <div>-Element, der die Klasse angewendet hat:

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

Versuchen Sie es selbst

Sehen Sie sich das folgende HTML an:

<div class="container">
  <div class="news">
    <h2>Ein Header</h2>
    <img src="example.jpg" alt="Ein Bild">
  </div>
</div>

Hier sind einige eingebettete <div>-Elemente. Wenn wir die Stile für die <h2> und <img>-Elemente im container/news-Bereich setzen möchten, müssen wir folgendes schreiben (ohne @scope):

Beispiel 2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

Versuchen Sie es selbst

Verwenden Sie @scope Regeln, mit denen Sie Elemente präzise定位, ohne komplizierte Selektoren schreiben zu müssen, wie folgt:

Beispiel 3

Hier setzen wir .container nur für die <h2> und <img>-Elemente im .container-Component als Root-Bereich der @scope-Regel:

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

Versuchen Sie es selbst

@scope Regeln enthalten eine oder mehrere Regelsets und können auf zwei Weisen verwendet werden:

• Als unabhängiger Block in CSS, in diesem Fall enthält er ein Lead-Teil, das die Bereichsroot und optionale Bereichsbeschränkungswähler enthält - diese definieren die oberen und unteren Begrenzungen des Bereichs.
• Als Inline-Style im <style>-Element von HTML, in diesem Fall wird das Lead-Teil weggelassen und die enthaltenen Regelsets wirken automatisch auf den übergeordneten Element des <style>-Elements.

Beispiel 4

"Donut-Area-Bereich" betrifft nur Elemente zwischen zwei Elementen im Vorfahrenbaum. Hier ist ein Beispiel:

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

Versuchen Sie es selbst

CSS-Syntax

@scope (Bereichsroot) {
  Regelset
}

oder

/* Donut-Area-Bereich */
@scope (Bereichsroot) to (Bereichsbeschränkung) {
  Regelset
}

Browserunterstützung

Die Zahlen in der Tabelle stellen die erste Browserversion dar, die diese @ Regel vollständig unterstützt.