CSSセレクタは次のような単純な文書で

Question

を期待通りに機能していませんdiv要素。 '〜'セレクタは機能しませんが、 '>'は期待どおりに動作します。私はWindowsマシンでChrome 49を使用しています。

Answer 1

+は、隣接するの兄弟コンビネータである。

divとpは、親/子関係（スペースは子孫コンビネータありながら>が子コンビネータである）ではない（<div></div><p></p>だろう）兄弟/姉妹関係を持っています。 pは、子要素

ある要素間の関係が親子であることから、あなたは'>'または' '

を使用しますが、div > pのみ即時を選択することに注意する必要がありながら

Answer 2

divは、親要素でありますp子要素では、他のp要素の直下の子要素ではないdiv

S

div > p{ color: red; }

にのみ、この

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