Was bewirkt das kaufmännische Und (&) in CSS-Pseudoelementen in Kombination mit LESS?

Das kaufmännische Und (&) in CSS-Pseudoelementen verstehen

In CSS können Pseudoelemente verwendet werden, um Elementen ohne Stile hinzuzufügen Ändern des Inhalts oder der Struktur des HTML. Wenn es in Verbindung mit Pseudoelementen verwendet wird, erfüllt das kaufmännische Und-Zeichen (&) einen bestimmten Zweck.

Beachten Sie das folgende CSS-Snippet, das häufig in Twitter Bootstrap zu sehen ist:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

In diesem Code , das kaufmännische Und (&) wird vor den Pseudoelementen :before und :after verwendet. Dies weist darauf hin, dass die auf die Pseudoelemente angewendeten Stile nur anwendbar sind, wenn sie auf das übergeordnete Element mit der Klasse „.clearfix“ angewendet werden.

Es ist wichtig zu beachten, dass diese Syntax nicht nativ für CSS ist. Es stammt von LESS, einem CSS-Präprozessor. In LESS ermöglicht das kaufmännische Und-Zeichen (&) die Verschachtelung von Selektormodifikatoren. Zum Beispiel:

.clearfix { 
  &:before {
    content: '';
  }
}

Dieser Code wird kompiliert zu:

.clearfix:before {
  content: '';
}

Das Vorhandensein des kaufmännischen Und-Zeichens (&) stellt sicher, dass der verschachtelte Selektor zu „.clearfix:before“ kompiliert wird. Ohne es wäre der resultierende Code „.clearfix :before“.

Zusammenfassend lässt sich sagen, dass das kaufmännische Und-Zeichen (&) bei Verwendung in Verbindung mit Pseudoelementen in LESS die Verschachtelung von Selektormodifikatoren ermöglicht Bietet eine bequeme Möglichkeit, Stile speziell auf die Nachkommen eines bestimmten Elements anzuwenden.

Das obige ist der detaillierte Inhalt vonWas bewirkt das kaufmännische Und (&) in CSS-Pseudoelementen in Kombination mit LESS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!