CSS Enfant vs Descendant sélecteurs

Question

Je suis un peu confus entre ces 2 sélecteurs. Le descendant sélecteur:

div p

sélectionnez tous p dans un div si oui ou non c'est un immmediate descedent? Donc, si l' p est à l'intérieur d'un autre div il sera toujours sélectionné?

Puis l' enfant sélecteur:

div > p

Quel est la différence? Un enfant signifie immédiat de l'enfant? Par exemple.

<div><p>

vs

<div><div><p>

permettra à la fois d'être sélectionné ou pas?

Answer 1

Il suffit de penser de ce que les mots "enfant" et "descendant" veut dire en anglais:

• Ma fille est à la fois mon enfant et mon descendant
• Ma petite-fille n'est pas mon enfant, mais elle est mon descendant.

Answer 2

Oui, vous avez raison. div p correspondra à l'exemple suivant, mais div > p ne le seront pas.

<div><table><tr><td><p> <!...

Le premier est appelé sélecteur de descendant et le second est appelé sélecteur d'enfant.

Answer 3

Bascailly, "b" permet de sélectionner tous les b à l'intérieur d'un, tandis que "a>b" sélectionne b ce sont seulement les enfants de l' un, il ne choisira pas b ce qui est de l'enfant de b qu'est-ce que l'enfant d' une.

Cet exemple illustre la différence:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

Couleur d'arrière-plan de l' abc et def sont verts, mais ghi aura rouge couleur d'arrière-plan.

IMPORTANT: Si vous changez l'ordre des règles:

div>span{background:green}
div span{background:red}

Toutes les lettres auront fond rouge, parce que descendant sélecteur sélectionne enfant est trop.

Answer 4

En théorie: Enfant => immédiatement un descendant d'un ancêtre (par exemple, Joe et son père)

Descendant => tout élément qui est le descendant d'un ancêtre particulier (par exemple, Joe et son arrière-arrière-grand-père)

Dans la pratique: essayez ce code HTML:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

avec ce CSS:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Answer 5

Sachez que le sélecteur d'enfant n'est pas pris en charge dans Internet Explorer 6. (Si vous utilisez le sélecteur jQuery/Prototype/YUI etc sélecteur plutôt que dans une feuille de style, il fonctionne toujours bien)