Selettori CSS Child vs Descendant

Question

Sono un po 'confuso tra questi 2 selettori.

fa il discendente selettore:

div p 

selezionare tutti p all'interno di un div anche se non si tratta di un descedent immediato? Quindi se lo p si trova all'interno di un altro div verrà comunque selezionato?

Poi il bambino selettore:

div > p 

cosa è la differenza? Un bambino significa figlio immediato? Per esempio.

<div><p> 

vs

<div><div><p> 

saranno entrambi selezionati, o no?

Answer 1

Basti pensare ciò che le parole "figlio" e "discendente" significa in inglese:

• Mia figlia è sia il mio bambino e la mia discendente
• Mia nipote non è mio figlio, ma lei è la mia discendente.

Answer 2

Sì, hai ragione. div p corrisponderà all'esempio seguente, ma non lo sarà div > p.

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

Il primo è chiamato descendant selector e il secondo è chiamato child selector.

Answer 3

Essere consapevoli del fatto che il selettore bambino non è supportata in Internet Explorer 6. (Se si utilizza il selettore in un/Prototipo/YUI etc selettore jQuery, piuttosto che in un foglio di stile funziona ancora però)

Answer 4

Bascailly, "ab" seleziona tutti i b è all'interno di una, mentre "a> b" seleziona di b quali sono solo i bambini a un, non selezionare b ciò che è figlio di B cosa è figlio di a.

Questo esempio illustra la differenza:

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

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

Colore di sfondo del abc e def sarà verde, ma ghi avrà colore di sfondo rosso.

IMPORTANTE: Se si modifica ordine delle regole per:

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

Tutte le lettere avranno sfondo rosso, a causa selettore di discendente seleziona figlio di troppo.

Answer 5

div p

seleziona tutti gli elementi 'P' in cui il genitore è un elemento 'div'

div > p

Significa bambini immediati Seleziona tutti gli elementi 'p', dove il genitore è un elemento 'div'

Answer 6

In teoria: Bambino => un discendente immediato di un antenato (ad esempio, Joe e suo padre)

Discendente => qualsiasi elemento discendente da un particolare antenato (ad es. Joe e il suo bis-bis-nonno)

In pratica: provare questo 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> 

con questo CSS:

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

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

Answer 7

selezione CSS e applicare lo stile a un particolare elemento può essere fatto attraverso il movimento attraverso l'elemento dom [Esempio

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>