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

Comprendre la différence dans la syntaxe des classes CSS : '.foo.bar' vs '.foo .bar'

En CSS, les noms de classe sont utilisés pour appliquer un style à éléments spécifiques sur une page Web. Cependant, il existe deux syntaxes distinctes utilisées pour définir les noms de classe : une sans espace et une avec un espace.

Syntaxe sans espace : .foo.bar

La syntaxe .foo.bar fait référence à un élément qui satisfait à la fois aux classes .foo et .bar. En d’autres termes, il sélectionne les éléments auxquels les classes .foo et .bar leur sont appliquées. Par exemple, si vous avez le CSS suivant :

.foo {
  color: red;
}

.bar {
  background-color: blue;
}

Et vous appliquez la classe .foo.bar à un élément, cet élément héritera du style des classes .foo et .bar. Il aura un texte rouge et un fond bleu.

Syntaxe avec un espace : .foo .bar

En revanche, la syntaxe .foo .bar sélectionne les éléments qui ont la classe .foo et sont les descendants d'éléments qui ont la classe .bar. Par exemple, avec le CSS suivant :

.foo {
  color: red;
}

.bar {
  background-color: blue;
}

Si vous appliquez la classe .foo .bar à un élément, il sélectionne uniquement les éléments de la classe .foo qui sont à l'intérieur des éléments de la classe .bar. Ainsi, il ne sélectionnerait pas les éléments avec uniquement la classe .foo ou les éléments qui sont imbriqués à plusieurs niveaux au plus profond des éléments .bar.

Conclusion

Comprendre la différence entre ces éléments deux syntaxes CSS sont cruciales pour appliquer un style avec précision aux éléments d'une page Web. La syntaxe sans espace sélectionne les éléments auxquels plusieurs classes sont appliquées, tandis que la syntaxe avec un espace sélectionne les éléments qui ont une classe spécifique dans un contexte spécifique.

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!