Was ist der Unterschied zwischen „.foo.bar' und „.foo.bar' in CSS-Klassenselektoren?

Den Unterschied in der CSS-Klassensyntax verstehen: '.foo.bar' vs. '.foo .bar'

In CSS werden Klassennamen verwendet, um Stile anzuwenden bestimmte Elemente auf einer Webseite. Es gibt jedoch zwei unterschiedliche Syntaxen, die zum Definieren von Klassennamen verwendet werden: eine ohne Leerzeichen und eine mit einem Leerzeichen.

Syntax ohne Leerzeichen: .foo.bar

Die Syntax .foo.bar bezieht sich auf ein Element, das sowohl die Klassen .foo als auch .bar erfüllt. Mit anderen Worten: Es werden Elemente ausgewählt, auf die sowohl die Klassen .foo als auch .bar angewendet werden. Wenn Sie beispielsweise das folgende CSS haben:

.foo {
  color: red;
}

.bar {
  background-color: blue;
}

Und Sie die Klasse .foo.bar auf ein Element anwenden, erbt dieses Element den Stil sowohl von der .foo- als auch von der .bar-Klasse. Es wird roten Text und einen blauen Hintergrund haben.

Syntax mit einem Leerzeichen: .foo .bar

Im Gegensatz dazu wählt die Syntax .foo .bar Elemente aus, die Folgendes haben die .foo-Klasse und sind Nachkommen von Elementen, die die .bar-Klasse haben. Zum Beispiel mit dem folgenden CSS:

.foo {
  color: red;
}

.bar {
  background-color: blue;
}

Wenn Sie die Klasse .foo .bar auf ein Element anwenden, werden nur Elemente mit der Klasse .foo ausgewählt, die sich innerhalb von Elementen mit der Klasse .bar befinden. Daher werden keine Elemente ausgewählt, die nur die Klasse .foo haben, oder Elemente, die mehrere Ebenen tief in .bar-Elementen verschachtelt sind.

Fazit

Den Unterschied zwischen diesen verstehen Die Verwendung zweier CSS-Syntaxen ist entscheidend für die korrekte Anwendung des Stils auf Elemente auf einer Webseite. Die Syntax ohne Leerzeichen wählt Elemente aus, auf die mehrere Klassen angewendet werden, während die Syntax mit Leerzeichen Elemente auswählt, die eine bestimmte Klasse in einem bestimmten Kontext haben.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen „.foo.bar' und „.foo.bar' in CSS-Klassenselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!