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

CSS-Klassensyntax: .foo.bar vs. .foo .bar

In CSS kann die Syntax zum Hinzufügen von Klassen zu Elementen variieren, was zu Verwirrung über deren Zweck führt Verwendung. Diese Frage befasst sich mit dem Unterschied zwischen den folgenden beiden Klassensyntaxen:

.element .symbol vs. .element.large .symbol

Erklärung

1. .element .symbol: Diese Syntax bedeutet, dass die .symbol-Klasse auf Elemente angewendet wird, die bereits über die .element-Klasse verfügen. Mit anderen Worten: Es werden Elemente ausgewählt, die Nachkommen von Elementen mit der Klasse .element sind.
2. .element.large .symbol: Diese Syntax ist anders. Hier wird die .large-Klasse an die .element-Klasse angehängt. Dies bedeutet, dass die .symbol-Klasse auf Elemente angewendet wird, die sowohl die .element- als auch die .large-Klasse haben.

Beispiel

Um dieses Konzept zu veranschaulichen, betrachten Sie das folgende HTML und CSS:

<div class="element">
  <div class="symbol"></div>
</div>

<div class="element large">
  <div class="symbol"></div>
</div>

.element .symbol {
  color: red;
}

.element.large .symbol {
  font-weight: bold;
}

In diesem Beispiel wird das erste .symbol-Div innerhalb des .element-Div rot gefärbt, während das zweite .symbol div innerhalb des großen .element-div wird sowohl rot als auch fett dargestellt.

Fazit

Der Unterschied zwischen den beiden Klassensyntaxen liegt in der Beziehung zwischen den angegebenen Klassen. .foo.bar wählt Elemente aus, die die bar-Klasse haben und Nachkommen von Elementen mit der foo-Klasse sind, während .foo .bar Elemente auswählt, die sowohl die foo- als auch die bar-Klasse haben.

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