Was bedeutet ein „&“ vor einem Pseudo -Element in CSS

Ein "&”Bevor ein Pseudoelement in den verschachtelten Aussagen verwendet wird, um sich auf die Hauptklasse der Eltern zu beziehen. In einer verschachtelten Erklärung kann es mehrere geben “&Symbole, die sich auf dieselbe Hauptklasse beziehen. Das bedeutet, dass das “&Symbol vor einem Pseudoelement zeigt an, dass die jeweilige Klasse oder Pseudo-Element das Kind der Hauptklasse der Hauptklasse ist.

Die Frage, die hier stellt, ist der Zweck der Verwendung der “&Symbol, wenn untergeordnete Klassen den Namen der übergeordneten Klasse verwenden können, während sie sich auf die Hauptklasse der Hauptklasse beziehen?

Das liegt daran, dass das “&Symbol verringert die Komplexität des Codes und erhöht die Lesbarkeit des Codes. Wenn der Code für jeden Zweck gelesen wird, z. B. das Testen des Code. Es ist nicht erforderlich, die vollständigen Namen der Hauptklasse immer wieder als Referenz zu schreiben, sodass es auch Zeit spart.

Beispiel 1: Mehrere untergeordnete Klassen, die sich auf die Hauptklasse beziehen

Normalerweise folgen sie der unten angegebenen Syntax, wenn mehrere untergeordnete Klassen mit einer Hauptklasse der Hauptklasse zugeordnet sind:

.Elternteil: Child1
.Elternteil: Child2
.Elternteil: Child3

Im obigen Code -Snippet gibt es eine übergeordnete Klasse mit drei untergeordneten Klassen mit dem Namen "Klasse 1","Klasse 2", Und "Klasse3”. Alle drei Kinderklassen haben den Namen der Elternklasse auf der linken Seite mit Kolons dazwischen geschrieben. Der gleiche Code, wenn mit geschrieben wurde “&Symbole werden wie folgt geschrieben:

.Eltern
&: Child1
&: Child2
&: Child3

Der Name der übergeordneten Klasse wurde durch das ersetzt “&Symbol und dies wird auch genauso kompilieren wie das vorherige Code -Snippet. Beide die obigen Code -Ausschnitte führen genauso aus, aber der Stil des Schreibens ist anders.

Beispiel 2: Klassen mit Abstand

Wir sehen oft auch einige Klassen, die miteinander mit einem Raum dazwischen geschrieben wurden. Betrachten wir ein einfaches Beispiel für zwei Klassen mit einem Raum dazwischen:

.Klasse 1 .Klasse 2

Das bedeutet, dass "Klasse 2"Ist das Kind von"Klasse 1“. Aber wenn wir eine verwenden "&„(Ampersand), um denselben Code zu schreiben. Es wird wie Folgendes geschrieben und zusammengestellt:

.Klasse 1
& .Klasse 2

Beispiel 3: Klassen ohne Abstand

Wenn es keinen Platz dazwischen gibt “Klasse 1" Und "Klasse 2„Es wird nicht dasselbe bedeutet und auf andere Weise zusammengestellt:

.Klasse 1.Klasse 2

Dies bedeutet, dass die Elemente mit beiden Klassen “Klasse 1" Und "Klasse 2”Werden ausgewählt. Wenn wir denselben Code aber mit kompilieren wollen, mit “&Symbol, es wird wie folgt geschrieben und zusammengestellt:

.Klasse 1
&.Klasse 2

Dies fasst die Verwendung von “zusammen“&”(Ampersand) vor einem Pseudo -Element in CSS.

Abschluss

Ein "&”(Ampersand) wird vor einem Pseudoelement in verschachtelten Aussagen verwendet, bei denen mehrere Eltern- und Kinderklassen vorhanden sind. “&”Wird verwendet, um sich auf die Hauptklasse der übergeordneten Klasse zu beziehen, ohne den Namen der übergeordneten Klasse in einem Code zu schreiben, und auf diese Weise verringert es die Komplexität des Codes und macht es verständlicher.