Wie wende ich mehrere CSS-Klassen auf ein einzelnes HTML-Element an?

Anwenden mehrerer CSS-Klassen auf ein einzelnes Element

In HTML kann das Klassenattribut verwendet werden, um CSS-Klassen für die Gestaltung eines Elements anzugeben. Allerdings tritt häufig das Problem auf, dass nur eine Klasse angewendet wird, wenn Sie mehrere Klassen innerhalb desselben Klassenattributs zuweisen.

Problem:

Anwenden mehrerer Klassen auf a Ein einzelnes Element mit separaten Klassenattributen funktioniert, wie unten gezeigt, nicht immer wie erwartet:

<code class="html"><a class="c1" class="c2">aa</a></code>

Antwort:

Es gibt zwei Methoden, um mehrere CSS anzuwenden Klassen effektiv einem einzelnen Element zuordnen:

Methode 1: Mehrere Klassen im Klassenattribut

Trennen Sie die Klassennamen durch Leerzeichen innerhalb des Klassenattributs:

<code class="html"><a class="c1 c2">aa</a></code>

Diese Methode weist dem Element beide Klassen gleichzeitig zu.

Methode 2: CSS-Selektor für mehrere Klassen

Um ein Element anzusprechen, das alle angegebenen Klassen enthält, verwenden Sie der folgende CSS-Selektor ohne Leerzeichen zwischen Klassennamen:

<code class="css">.c1.c2 {
    /* CSS properties */
}</code>

Dieser Selektor sucht nach Elementen, auf die sowohl die Klassen „c1“ als auch „c2“ angewendet werden.

Das obige ist der detaillierte Inhalt vonWie wende ich mehrere CSS-Klassen auf ein einzelnes HTML-Element an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!