Juste au cas où quelqu'un trébucherait sur cela comme je l'ai fait et ne s'en rend pas compte, les deux variantes ci-dessus sont pour des cas d'utilisation différents.
Le suivant:
.blue-border, .background {
border: 1px solid #00f;
background: #fff;
}
est pour lorsque vous souhaitez ajouter des styles à des éléments qui ont la classe de bordure bleue ou d'arrière-plan, par exemple:
<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>
recevraient tous une bordure bleue et un fond blanc qui leur seraient appliqués.
Cependant, la réponse acceptée est différente.
.blue-border.background {
border: 1px solid #00f;
background: #fff;
}
Cela applique les styles aux éléments qui ont les deux classes, donc dans cet exemple, seuls les <div>
avec les deux classes devraient obtenir les styles appliqués (dans les navigateurs qui interprètent correctement le CSS):
<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>
Donc, en gros, pensez-y comme ceci, la séparation par virgule s'applique aux éléments avec une classe OU une autre classe et la séparation par points s'applique aux éléments avec une classe ET une autre classe .