Manchmal müssen die Entwickler einige HTML -Elemente mit mehreren Klassen verknüpfen und dann mit Klassenauswahl auf diese Klassen verweisen. In der CSS -Funktionalität müssen alle Klassenauswahlern im Stilelement vorhanden sein, um die CSS -Eigenschaften auf die Elemente anzuwenden. Aber in den CSS “oder”, Die Hinzufügung von zusätzlichen Klassenauswahlern kann die Stileigenschaften korrekt anwenden.

Lassen Sie uns die Funktionsweise von CSS „und“ und „oder“ im Detail verstehen.

So wenden Sie "und" Funktionen in HTML/CSS an?

Das CSS “UndDie Funktionalität funktioniert so, dass sie die CSS -Eigenschaften auf den Elementen anwendet, wenn nur die mit diesen Elementen zugeordneten genauen Selektoren im CSS -Stilelement hinzugefügt werden. Seine Funktionalität kann durch Hinzufügen der “verwendet werden.”Selektor. Darüber hinaus sollte es keinen Platz zwischen den Klassenauswahlern geben.

Syntax

Die Syntax der Verwendung der “.Selektor ist wie folgt:

.Klasse 1.Klasse 2.Klasse3… …

Beispiel: Hinzufügen “.”Mit CSS -Klassenauswahlern

Nehmen wir an, wir haben das folgende HTML -Beispiel, bei dem die “

Element, die mit drei verschiedenen Klassen verbunden sind, ich.e., “Klasse 1","Klasse 2" Und "Klasse3”:

CSS "und"

Im obigen Code -Snippet:

• A ""Tagelement wird mit mehreren Klassen hinzugefügt", "Klasse 1","Klasse 2" Und "Klasse3”.
• Im Divelelement gibt es eine “

  " Überschrift:

.Klasse 1.Klasse 2.Klasse3

Text-Align: Mitte;
Farbe blau;

Im CSS -Abschnitt:

• Die drei Klassenauswahlern werden ohne Platz dazwischen hinzugefügt.
• Mit dem Abschnitt haben wir angegeben “Textausrichtung" Und "FarbeEigenschaften, die für das Element definiert sind, das den drei Klassen zugeordnet ist.

Die CSS -Eigenschaften werden auf das Element angewendet. Dies erzeugt die folgende Ausgabe:

Wenn wir nun eine andere Klasse hinzufügen “Class4”Im CSS -Stilelement:

.Klasse 1.Klasse 2.Klasse3.Class4

Text-Align: Mitte;
Farbe blau;

Dies gilt keine Eigenschaften für die “

Element trotz der Anwesenheit aller drei verwandten Klassen im Stilelement aufgrund der Zugabe einer zusätzlichen Klasse:

So wenden Sie "oder" Funktionen in HTML/CSS an?

In CSS, “oderFunktioniert so, dass es die CSS -Eigenschaften auf alle Elemente anwendet, die jeder Klasse im CSS -Stil hinzugefügt haben. Die Zugabe von zusätzlichen Klassenauswahlern wirkt sich nicht auf die Arbeit der Selektoren aus. In diesem Fall sind die Klassenauswahlern mit Kommas getrennt “,”In CSS.

Syntax

Die Syntax zur Verwendung der "oder" -Funktionalität lautet wie folgt:

.Klasse 1, .Klasse 2, .Klasse3,… …

Es kann beobachtet werden, dass “,”Wird zwischen den Klassenauswahlern hinzugefügt.

Beispiel: Hinzufügen von „“ mit CSS -Klassenauswahlern

Verwenden wir den gleichen HTML -Code:

CSS "oder"

.Klasse 1, .Klasse 2, .Klasse3

Text-Align: Mitte;
Farbe blau;

Im CSS -Stilelement werden die Klassenauswahlern durch Kommas getrennt hinzugefügt," zwischen ihnen.

Dadurch wird auch die im CSS -Stilelement definierten CSS -Eigenschaften auf das Element angewendet, das zugeordnet istKlasse 1","Klasse 2" Und "Klasse3”:

Wenn wir nun einen zusätzlichen Klassenwähler hinzufügen “Class4" folgendermaßen:

.Klasse 1, .Klasse 2, .Klasse3, .Class4

Text-Align: Mitte;
Farbe blau;

Dadurch wird die Eigenschaften auf die “angewendet“

"Element im Gegensatz zu CSS"UndFunktionalität:

Dies fasst die Arbeit von CSS und "und" oder "zusammen.

Abschluss

Das CSS “Und”Funktioniert so, dass die CSS -Eigenschaften gelten, wenn die genaue Anzahl und Namen der Klassenauswahlern, die sich auf die Klassen der Elemente beziehen, hinzugefügt werden. Das CSS “oder”Funktioniert so, dass die in IT hinzugefügten Eigenschaften für die Elemente gelten, auch wenn ein mit den Elementen zugeordneter einziger Klassenname hinzugefügt wird, oder wenn einige zusätzliche Klassenauswahl hinzugefügt werden. Dieser Blog leitete das Hinzufügen der Funktionalität „und“ und „oder“ in HTML.