sélecteur CSS ne fonctionne pas comme prévu

Question

Dans le document simple:

div+p { 
 
    color: red; 
 
}

<div> 
 
    <p>Hi Caitlin! Welcome to CSS!</p> 
 
</div>

Le texte entre les balises « p » (paragraphe) ne sont pas affichés en rouge en dépit d'être les enfants du élément div. Le sélecteur '~' ne fonctionne pas non plus, mais '>' fonctionne comme prévu. J'utilise Chrome 49 sur une machine Windows.

Answer 1

+ est le combinateur frère adjacent.

Le div et p ont une relation parent/enfant (> est l'enfant Combinator tandis qu'un espace est le descendant Combinator) pas une relation frère/soeur (qui serait <div></div><p></p>).

Answer 2

div est l'élément parent alors que p est l'élément enfant

puisque la relation entre les éléments est parent-enfant, vous devez utiliser '>' ou ' '

mais notez que div > p ne sélectionnera les immédiate p éléments enfants, il ne fonctionnera pas sur les autres éléments p qui ne sont pas un élément enfant immédiat de la div

s

div > p{ color: red; }

ne fonctionne que comme ce

<div> 
    <p>this will be in red color</p> 
    <div> 
     <p>this will not be in red color</p> 
    </div> 
    <p>this will also be in red color</p> 
    <div> 
     <div> 
      <p>this will not be in red color</p> 
     </div> 
    </div> 
</div> 

mais

div p{ color: red; }

fonctionne comme ceci

<div> 
    <p>this will be in red color</p> 
    <div> 
     <p>this will also be in red color</p> 
    </div> 
    <p>this will also be in red color</p> 
    <div> 
     <div> 
      <p>this will also be in red color</p> 
     </div> 
    </div> 
</div>