Son “div> p” y “div p” misma?

Question

Hola, tengo una pregunta obvia.

Para obtener un código como:

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

Algunas personas utilizan el selector como:

div > p {
     something
}

y otros:

div p {
     something
}

¿Cuál es la diferencia en este caso? En mi opinión - Ninguno

Y, por cierto, no es el elemento descendiente siempre un niño ?! ¿Cuál es la diferencia entre los dos? Estoy leyendo w3.org pero no puedo conseguirlo:)

Gracias!

Answer 1

simple:

 div > p

afecta sólo a hijos directos.

 div p

afecta nietos, etc. grandgrandchildren también. (no hará una diferencia en su ejemplo)

El niño selector de no es compatible con IE6 .

Answer 2

Pekka ha explicado que, en teoría, en su respuesta . Sobre la base de su respuesta, y mi respuesta a otra pregunta sobre el combinador > , voy a dar un ejemplo, modificado para abordar esta cuestión.

Considere el siguiente bloque de HTML y sus selectores CSS ejemplo. Yo uso un ejemplo más elaborado para que yo pueda mostrar la diferencia entre ambos de sus selectores:

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

¿Qué <p>s son seleccionados por qué selectores?

En primer lugar, todos ellos coinciden div p , ya que son elementos situados <p> en cualquier lugar dentro un elemento <div>.

Eso hace div > p más específica, la cual nos lleva a la siguiente pregunta:

¿Qué <p>s son seleccionados por div > p?

1. seleccionado

   Esta <p> párrafo es un niño, o un descendiente directo, de la <div> más externa. Eso significa que no es contenida inmediatamente por cualquier otro elemento que un <div>. La jerarquía es tan simple como el selector describe, y como tal está seleccionado por div > p.

2. No seleccionado

   Esta <p> se encuentra en un elemento <blockquote>, y el elemento de <blockquote> se encuentra en el <div> más externa. La jerarquía sería por lo tanto tener este aspecto:

   div > blockquote > p
   

   A medida que el párrafo está contenida directamente por un blockquote, es no seleccionados por div > p. Sin embargo, puede blockquote > p partido (en otras palabras, es un hijo de la <blockquote>).

3. seleccionado

   Este párrafo vive en el <div> interior, que está contenido por el <div> exterior. La jerarquía se vería así:

   div > div > p
   

   No importa si hay más <div>s anidados uno dentro de otro, o incluso si las <div>s están contenidos por otros elementos. Mientras este párrafo está contenida directamente por su propia <div>, que será seleccionado por div > p.