Sono "div> p" e "div p" uguali?

Question

Ehi, ho una domanda ovvia.

Per il codice come:

<div> 
    <p>We want to format this text :)</p> 
</div> 

Alcune persone usano selettore del tipo:

div > p { 
    something 
} 

E altri:

div p { 
    something 
} 

Qual è la differenza in questo caso? Secondo me - nessuno?

E a proposito, l'elemento discendente non è sempre un bambino ?! Qual è la differenza tra i due? Sto leggendo w3.org ma non riesco a ottenerlo :)

Grazie!

Answer 1

Semplice:

div > p 

colpisce solo figli diretti.

div p 

colpisce nipoti, ecc grandgrandchildren pure. (Non farà la differenza nell'esempio)

Il selettore di bambini isn't supported by IE6.

Answer 2

Pekka lo ha spiegato in teoria in his answer. Sulla base della sua risposta, e my answer to another question about the > combinator, fornirò un'illustrazione, modificata per rispondere a questa domanda.

Si consideri il seguente blocco di HTML e i selettori CSS di esempio. Io uso un esempio più elaborato in modo da poter mostrare la differenza tra entrambe le selettori:

<div> 
    <p>The first paragraph.</p>     <!-- [1] --> 
    <blockquote> 
     <p>A quotation.</p>      <!-- [2] --> 
    </blockquote> 
    <div> 
     <p>A paragraph after the quotation.</p> <!-- [3] --> 
    </div> 
</div> 

Quali <p> s sono selezionati da quali selettori?

Prima di tutto, tutti abbinarli div p perché sono <p> elementi situati ovunque all'interno di un elemento<div>.

che rende div > p più specifici, il che pone la domanda successiva:

Quali <p> s sono selezionati da div > p?

1. Selezionato

   Questo paragrafo <p> è un bambino, o di un discendente diretto, il più esterno <div>. Ciò significa che non è immediatamente contenuto da nessun altro elemento oltre a <div>. La gerarchia è semplice come il selettore descrive e come tale è selezionata da div > p.

2. Non selezionato

   Questo <p> si trova in un elemento <blockquote>, e l'elemento <blockquote> si trova in quello più esterno <div>. La gerarchia sarebbe quindi simile a questa:

   div > blockquote > p 
   

   Come il paragrafo è direttamente contenuta da una blockquote, è non selezionati da div > p. Tuttavia, è può corrisponde a blockquote > p (in altre parole, è un figlio di <blockquote>).

3. selezionati

   Questo paragrafo vita nel interna <div>, che è contenuta dalla esterno <div>. La gerarchia sarebbe simile a questa:

   div > div > p 
   

   Non importa se ci sono più <div> s annidati uno dentro l'altro, o anche se le <div> s sono contenuti da altri elementi. Finché questo paragrafo è direttamente contenuto dal proprio <div>, sarà selezionato da div > p.