Sélecteur CSS enfant vs descendant

Question

Je suis un peu confus entre ces 2 sélecteurs.

Est-ce que le descendant sélecteur:

div p 

sélectionner tous p dans un div si oui ou non il est un descedent immédiat? Donc, si le p est dans un autre div, il sera toujours sélectionné?

Puis le enfant sélecteur:

div > p 

Quelle est la différence? Est-ce qu'un enfant signifie immédiat enfant? Par exemple.

<div><p> 

vs

<div><div><p> 

seront tous deux sélectionnés, ou non?

Answer 1

Il suffit de penser à ce que les mots « enfant » et « descendant » signifie en anglais:

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

Answer 2

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

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

Le premier est appelé descendant selector et le second est appelé child selector.

Answer 3

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

Answer 4

Bascailly, "ab" sélectionne tous les b est à l'intérieur d'un, alors que "a> b" Précise de b ce ne sont que des enfants au un, il ne choisirons pas b ce qui est l'enfant de b qu'est-ce qu'un enfant de a.

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 de fond de abc et def sera vert, mais ghi aura la couleur de fond rouge.

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

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

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

Answer 5

div p

Sélectionne tous __gVirt_NP_NNS_NNPS<__ éléments 'p' où le parent est un élément 'div'

div > p

Il signifie que les enfants immédiats Sélectionne tous les éléments 'p' où le parent est un élément 'div'

Answer 6

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

Descendant => tout élément descendant d'un ancêtre particulier (par ex. Joe et son arrière-grand-grand-grand-père)

En pratique: essayer ce 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 7

sélection CSS et appliquer un style à un élément particulier peut être fait en traversant l'élément dom [Exemple

Example

.a .b .c .d{ 
    background: #bdbdbd; 
} 
div>div>div>div:last-child{ 
    background: red; 
} 

<div class='a'>The first paragraph. 
<div class='b'>The second paragraph. 
    <div class='c'>The third paragraph. 
    <div class='d'>The fourth paragraph.</div> 
    <div class='e'>The fourth paragraph.</div> 
    </div> 
</div> 
</div>