Quelle est la différence entre « .foo.bar » et « .foo .bar » dans la syntaxe de classe CSS ?

Syntaxe des classes CSS : .foo.bar vs .foo .bar

En CSS, la syntaxe d'ajout de classes aux éléments peut varier, conduisant à une confusion quant à leur intention usage. Cette question aborde la différence entre les deux syntaxes de classe suivantes :

.element .symbol vs .element.large .symbol

Explication

1. .element .symbol : Cette syntaxe signifie que la classe .symbol est appliquée aux éléments qui possèdent déjà la classe .element. En d'autres termes, il sélectionne les éléments qui sont des descendants d'éléments de classe .element.
2. .element.large .symbol : Cette syntaxe est différente. Ici, la classe .large est attachée à la classe .element. Cela signifie que la classe .symbol est appliquée aux éléments qui ont à la fois les classes .element et .large.

Exemple

Pour illustrer ce concept, considérons le HTML et le CSS suivants :

<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;
}

Dans cet exemple, le premier div .symbol à l'intérieur du div .element sera coloré en rouge, tandis que le le deuxième .symbol div à l'intérieur du grand div .element sera à la fois coloré en rouge et en gras.

Conclusion

La différence entre les deux syntaxes de classe réside dans la relation entre les classes spécifiées. .foo.bar sélectionne les éléments qui ont la classe bar et sont les descendants d'éléments avec la classe foo, tandis que .foo .bar sélectionne les éléments qui ont à la fois les classes foo et bar.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!