Quelle est la différence entre les classes CSS .foo.bar (sans espace) et .foo .bar (avec espace)

Question

Pourriez-vous s'il vous plaît m'expliquer la différence entre la syntaxe de ces deux classes CSS :

 .element .symbol {}

et

 .element.large .symbol {}

Je ne comprends pas la différence entre les deux. La première ligne indique deux classes différentes auxquelles sont appliqués les mêmes styles. Mais à propos du second, quelle est la signification de '.large' qui est écrit attaché à '.element' ?

Answer 1

.element .symbol

signifie .symbol intérieur de .element

 .element.symbol

signifie .element qui a également la classe symbol .

Donc,

 .element.large .symbol

signifie .symbol intérieur de .element qui a également la classe large .

Answer 2

Utilisant

 .element.large

fait référence à un élément avec les deux classes :

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

plutôt qu'un descendant d'un élément :

 .element .large

ce qui signifie que dans :

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

seul

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

« reçoit » les styles.

Fondamentalement , être séparé par un espace implique deux éléments avec une relation descendant

Answer 3

Vous utiliseriez .element .symbol ceci où vous avez un élément à l'intérieur d'un autre élément. Par example:

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

Si plus tard vous vouliez différencier certaines divisions, vous pouvez ajouter une classe supplémentaire pour cibler uniquement celles qui diffèrent, et la cibler avec .element.large .symbol . Ainsi, par exemple :

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