Sono “div> p” e “div p” stesso?

Question

Ciao, 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 gli altri:

div p {
     something
}

Qual è la differenza in questo caso? A mio parere -? None

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

Grazie!

Answer 1

Semplice:

 div > p

influisce solo figli diretti.

 div p

colpisce nipoti, grandgrandchildren ecc pure. (non farà la differenza nel tuo esempio)

Il bambino selettore non è supportato da IE6 .

Answer 2

Pekka ha spiegato che, in teoria, in sua risposta . Sulla base della sua risposta e la mia risposta a un'altra domanda circa il combinatore > , fornirò un esempio, modificato per rispondere a questa domanda.

Si consideri il seguente blocco di codice HTML, e le tue selettori CSS 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 vengono selezionati dai quali selettori?

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

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

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

1. selezionato

   Questo paragrafo <p> è un bambino, o di un discendente diretto, del <div> più esterno. Ciò significa che non è immediatamente compreso da qualsiasi altro elemento di un <div>. La gerarchia è semplice come il selettore descrive, e come tale è selezionato dal div > p.

2. Non selezionata

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

   div > blockquote > p
   

   Mentre il paragrafo è direttamente contenuta da una blockquote, è di non selezionati da div > p. Tuttavia, possono partita blockquote > p (in altre parole, si tratta di un figlio del <blockquote>).

3. selezionato

   Questo paragrafo vive nel <div> interna, che è contenuta dal <div> esterno. 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 contenuta dal proprio <div>, sarà selezionato da div > p.