Sélecteurs CSS,> versus espace

Question

Quel est le point en utilisant cette syntaxe

 div.card > div.name
 

Quelle est la différence entre cela

 div.card div.name
 

Je vous remercie!

Answer 1

A > B ne sélectionnera que B qui sont des enfants directs à A (c'est-à-dire qu'il n'y a pas d'autres éléments entre les deux).

A B sélectionnera tout B qui est à l'intérieur de A, même s'il y a d'autres éléments entre eux.

Answer 2

> est le sélecteur de descendant. Il spécifie uniquement les éléments enfants immédiats et pas les descendants (y compris les petits-enfants, petits-enfants, etc.) comme dans le deuxième exemple sans les > .

Le sélecteur de descendant n'est pas pris en charge par IE 6 et inférieur. Un grand tableau de compatibilité est ici .

Answer 3

div.card > div.name correspond à <div class='card'>....<div class='name'>xxx</div>...</div> mais il ne correspond pas à <div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name correspond aux deux.

C'est-à-dire que le sélecteur > s'assure que l'élément sélectionné du côté droit du > est un enfant immidiate de l'élément situé du côté gauche.

La syntaxe sans le > correspond à tout <div class='name'> qui est un descendant (pas seulement un enfant) de <div class='card'> .

Answer 4

Comparez l' enfant et le descendant .