Sont « div> p » et « div p » même?

Question

Hé, j'ai une question évidente.

Pour le code comme:

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

Certaines personnes utilisent comme sélecteur:

div > p {
     something
}

Et d'autres:

div p {
     something
}

Quelle est la différence dans ce cas? À mon avis - none

Et par ailleurs, est pas l'élément descendant toujours un enfant ?! Quelle est la différence entre les deux? Je lis w3.org mais ne peut pas l'obtenir:)

Merci!

Answer 1

simple:

 div > p

ne touche que les enfants directs.

 div p

affecte petits-enfants, etc. grandgrandchildren aussi bien. (Ne faire une différence dans votre exemple)

L'enfant sélecteur est pas pris en charge par IE6 .

Answer 2

Pekka il a expliqué en théorie sa réponse . Sur la base de sa réponse, et ma réponse à une autre question sur le combinateur > , je vais vous donner une illustration, modifiée pour répondre à cette question.

Considérez le bloc de code HTML suivant, et votre exemple de sélecteurs CSS. J'utilise un exemple plus complexe, donc je peux vous montrer la différence entre vos deux sélecteurs:

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

Quels <p>s sont sélectionnés par quels sélecteurs?

Tout d'abord, tous correspondent div p parce qu'ils sont des éléments situés <p> ne importe où dans un élément <div>.

Cela rend div > p plus précis, ce qui pose la question suivante:

Quels <p>s sont sélectionnés par div > p?

1. sélectionné

   Ce paragraphe <p> est un enfant, ou un descendant direct, de la <div> extérieure. Cela signifie qu'il est pas immédiatement contenue par tout autre élément qu'un <div>. La hiérarchie est aussi simple que le sélecteur décrit, et en tant que tel, il est sélectionné par div > p.

2. Non sélectionné

   <p> se trouve dans un élément de <blockquote>, et l'élément de <blockquote> se trouve dans le <div> plus à l'extérieur. La hiérarchie serait donc ressembler à ceci:

   div > blockquote > p
   

   Comme le paragraphe est directement contenu par un blockquote, il est pas sélectionné par div > p. Cependant, il peut blockquote > p match (en d'autres termes, il est un enfant du <blockquote>).

3. sélectionné

   Ce paragraphe vit dans la <div> intérieure, qui est contenu par la <div> externe. La hiérarchie ressemblerait à ceci:

   div > div > p
   

   Peu importe s'il y a plus de <div>s imbriquées les unes dans les autres, ou même si les <div>s sont contenus par d'autres éléments. Tant que ce paragraphe est directement contenu par son propre <div>, il sera sélectionné par div > p.