CSS-Einfügen-Selektoren (&)

Definition und Verwendung

CSS-Einfügen (&) Selektoren werden verwendet, um Stile für Elemente in einem anderen Kontext anzuwenden.

Das Einfügen reduziert den Bedarf, wiederholte Selektoren für verwandte Elemente zu verwenden.

Beispiel

Beispiel 1

Bevor das Einfügen erfolgt, müssen Sie jeden Selektor explizit separat deklarieren, wie im folgenden Beispiel gezeigt:

.box {
  Rahmen: 2 px fester grüner Rahmen;
  Hintergrundfarbe: Beige;
  Schriftart: Monospace;
  Schriftgröße: 20 px;
}
.box > a {
  Farbe: Grün;
}
.box > a:hover {
  Farbe: Weiß;
  Hintergrundfarbe: Salmon;
}

Probieren Sie es selbst aus

Beispiel 2

Nach dem Einfügen wird der Selektor fortgesetzt und die entsprechenden Styleregeln werden in der Elternregel gruppiert:

.box {
  Rahmen: 2 px fester grüner Rahmen;
  Hintergrundfarbe: Beige;
  Schriftart: Monospace;
  Schriftgröße: 20 px;
  & > a {
    Farbe: Grün;
    &:hover {
      Farbe: Weiß;
      Hintergrundfarbe: Salmon;
    }
  }
}

Probieren Sie es selbst aus

Tipp:Wenn Sie die .box-Styles aus Ihrem Projekt entfernen möchten, können Sie den gesamten Gruppe löschen, ohne nach den entsprechenden Selektoren zu suchen.

CSS-Syntax

Elternregel {
  css-Anweisungen;
  & Kindregel {
    css-Anweisungen;  } 
}

Technische Details

Browser-Unterstützung