Selettori CSS vs Discendenti

Sono un po 'confuso tra questi 2 selettori.

Il selettore discendente :

div p

seleziona tutto pall'interno divdi un discendente immediato o no? Quindi, se pè dentro un altro div, sarà comunque selezionato?

Quindi il selettore figlio :

div > p

Qual è la differenza? Un bambino significa bambino immediato ? Per esempio.

<div><p>

vs

<div><div><p>

saranno entrambi selezionati o no?

Basti pensare a cosa significano le parole "figlio" e "discendente" in inglese:

• Mia figlia è sia mia figlia che mia discendente
• Mia nipote non è mia figlia, ma è la mia discendente.

Sì hai ragione. div pcorrisponderà al seguente esempio, ma div > pnon lo farà.

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

Il primo si chiama selettore discendente e il secondo si chiama selettore figlio .

Bascailly, " ab " seleziona tutte le b all'interno di a, mentre " a> b " seleziona b quali sono solo figli di a , non selezionerà b ciò che è figlio di b ciò che è 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>

Il colore di sfondo di abc e def sarà verde, ma ghi avrà il colore di sfondo rosso.

IMPORTANTE: se si modifica l'ordine delle regole in:

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

Tutte le lettere avranno uno sfondo rosso, perché il selettore discendente seleziona anche quello del bambino.

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

Discendente => qualsiasi elemento che discenda da un particolare antenato (ad es. Joe e il suo trisavolo)

In pratica: prova 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/

Tenere presente che il selettore figlio non è supportato in Internet Explorer 6. (Se si utilizza il selettore in un selettore jQuery / Prototype / YUI ecc. Anziché in un foglio di stile, funziona comunque)

div p 

Seleziona tutti gli elementi 'p' in cui l'elemento principale è un elemento 'div'

div> p

Significa figli immediati Seleziona tutti gli elementi 'p' in cui il genitore è un elemento 'div'

La selezione CSS e l'applicazione dello stile a un particolare elemento possono essere eseguite attraversando l'elemento dom [Esempio

Esempio

.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>