Wie kann ich mit CSS mehrere Klassen auf einem einzelnen HTML-Element formatieren?

Mehrere Klassen für ein einzelnes Element formatieren

Bei der Arbeit mit CSS kann es sein, dass Sie mehrere Klassen auf ein HTML-Element anwenden müssen, um bestimmte Styling-Effekte zu erzielen. Allerdings kann die Zuweisung mehrerer Klassen mithilfe von HTML verwirrend sein und zu falschen Ergebnissen führen.

In Ihrem Fall wollten Sie den oberen Abstand vom ersten sozialen Symbol und den unteren Rand vom letzten entfernen. Das Problem ist auf Ihr HTML-Markup zurückzuführen, bei dem Sie versucht haben, zwei separate Klassen direkt derselben sozialen Abteilung hinzuzufügen.

Korrektes HTML-Markup:

Um mehrere Klassen richtig zu verwenden , sollten Sie sie innerhalb desselben Klassenattributs wie folgt auflisten:

<div class="social first"></div>

Entsprechendes CSS:

.social.first {
  padding-top: 0;
}

Durch die Verwendung dieser Syntax werden sowohl .social als auch .first-Klassen werden auf das div-Element im HTML angewendet, sodass Sie beide Stilanforderungen erfüllen können.

Beispieldemonstration:

/* Base styling for both social icons */
.social {
  width: 330px;
  height: 75px;
  float: right;
  text-align: left;
  padding: 10px 0;
  border-bottom: dotted 1px #6d6d6d;
}

/* Styling for the first social icon */
.social.first {
  padding-top: 0;
}

/* Styling for the last social icon */
.social.last {
  border: none;
}

Dieser Code wird erfolgreich ausgeführt Wenden Sie am oberen Rand des ersten sozialen Symbols einen Nullabstand an und entfernen Sie den unteren Rand vom letzten, um die gewünschten Stilanforderungen zu erfüllen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS mehrere Klassen auf einem einzelnen HTML-Element formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!