Quand dois-je mettre div. avec deux sélecteurs CSS?

Question

Je voulais juste savoir quand me neccessaire pour de placer un div.cssclass lorsque vous utilisez deux classes CSS ensemble dans ma feuille de style. Normalement, je dépanne en utilisant avec et sans elle jusqu'à ce que cela fonctionne, ce qui est évidemment assez bien et assez rapide, mais je serais bon de connaître la meilleure pratique.

Exemple:

.cssclass1 .cssclass2 { } 

VS

.cssclass1 div.cssclass2 { } 

Est-ce quand son pas frères et soeurs directement à elle, i.e. la prochaine classe imbriquée là-dedans?

Answer 1

Si ces deux éléments sont divs, alors il n'y aucune différence, sauf que

.cssclass1 .cssclass2 { 

est plus rapide que

.cssclass1 div.cssclass2 { 

Si vous avez laissé de dire:

<div class="cssclass1"> 
    <div class="cssclass2"></div> 
    <a class="cssclass2"></a> 
</div> 

alors .cssclass1 .cssclass2 { choisirait à la fois div et a, alors que .cssclass1 div.cssclass2 { choisirait que la div.

Answer 2

La différence est Spécificité parce que si vous avez .cssclass1 .cssclass2, tous les éléments avec que les classes sont affectées MAIS si vous utilisez .cssclass1 div.cssclass2, le seul touché est l'élément <div> avec la classe cssclass2.

Answer 3

Comme l'a dit Jonjie, il est à peu près la spécificité. Voici un exemple ...

div .cssclass2 { 
    background-color: green; 
} 

.cssclass1 div { 
    background-color: blue; 
} 

div div { 
    background-color: orange; 
} 
<div class="cssclass1"> 
<div class="cssclass2"> 
hello 
</div> 
</div> 

Comme vous pouvez le voir, aucune des déclarations de style sont une correspondance exacte pour notre html ici. Alors, de quelle couleur devrait être l'arrière-plan? CSS a un moyen de résoudre cette ambiguïté en identifiant le CSS qui est le plus spécifique au HTML. Il y a quelques bons articles sur la compréhension de la spécificité CSS.