CSS-Klassen: Leerzeichen vs. kein Leerzeichen – Was ist der Unterschied?

CSS-Klassen: Mit Leerzeichen vs. ohne Leerzeichen

In CSS gibt es zwei Möglichkeiten, Klassenselektoren zu schreiben: mit Leerzeichen (.class .class) und ohne Leerzeichen (.class.class). Jede Syntax dient einem anderen Zweck.

Ohne Leerzeichen: .class.class

Diese Syntax gibt an, dass das Element beide Klassen haben muss, um mit dem Selektor übereinzustimmen. Beispielsweise würde .element.large .symbol jedes .symbol-Element auswählen, das sich innerhalb eines .element-Elements befindet, das auch die große Klasse hat.

Mit Leerzeichen: .class .class

Diese Syntax gibt an, dass das Element beide Klassen in beliebiger Reihenfolge haben muss. Beispielsweise würde .element .symbol jedes .symbol-Element auswählen, das sich innerhalb eines .element-Elements befindet. Es würde jedoch auch jedes .element-Element auswählen, das eine .symbol-Klasse hat, unabhängig von seiner Position im Dokument.

Beispiel:

Beachten Sie das folgende CSS:

.element {
  color: black;
}

.large {
  font-size: 2em;
}

.symbol {
  font-family: monospace;
}

• .element .symbol würde alle .symbol-Elemente auswählen, die sich in .element-Elementen befinden, und sie würden erben Der Stil „color: black“ von .element.
• .element.large .symbol würde alle .symbol-Elemente auswählen, die sich in .element-Elementen befinden, die auch die große Klasse haben, und sie würden die Farbe „black“ und die Schriftart erben -Größe: 2em Stile.

Das obige ist der detaillierte Inhalt vonCSS-Klassen: Leerzeichen vs. kein Leerzeichen – Was ist der Unterschied?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!