CSS子セレクターと子孫セレクター

これら2つのセレクターの間で少し混乱しています。

い子孫セレクタは：

div p

それが直系の子孫pであるdivかどうかに関係なく、すべてを選択しますか？では、p別のdivものの中にある場合でも選択されますか？

そして、子セレクタ：

div > p

違いは何ですか？子供は身近な子供を意味しますか？例えば。

<div><p>

対

<div><div><p>

両方が選択されますか？

英語で「子供」と「子孫」という単語の意味を考えてみてください。

• 私の娘は私の子供であり、私の子孫でもあります
• 私の孫娘は私の子供ではありませんが、彼女は私の子孫です。

はい。それで合っています。div p次の例と一致しますが、一致しdiv > pません。

<div><table><tr><td><p> <!...

1つ目は子孫セレクターと呼ばれ、2つ目は子セレクターと呼ばれます。

Bascailly、「AB」ながら「選択すべてのBの内側に、a> bの」選択のBだけに子供であるかaが、それは選択しないだろうbはの子であるかBの子は何か。

この例は違いを示しています：

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

abcとdefの背景色は緑になりますが、ghiの背景色は赤になります。

重要：ルールの順序を次のように変更した場合：

div>span{background:green}
div span{background:red}

子孫セレクタが子も選択するため、すべての文字の背景が赤になります。

理論上： 子=>祖先の直系の子孫（例：ジョーと彼の父親）

子孫=>特定の祖先の子孫である要素（例：ジョーと彼の偉大な祖父）

実際には、次の HTMLを試してください。

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

このCSSで：

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

子セレクターはInternet Explorer 6ではサポートされていないことに注意してください（セレクターをスタイルシートではなくjQuery / Prototype / YUIなどのセレクターで使用する場合でも、引き続き機能します）。

div p 

親が「div」要素であるすべての「p」要素を選択します

div> p

これは、直接の子が親が「div」要素であるすべての「p」要素を選択することを意味します

CSSの選択と特定の要素へのスタイルの適用は、dom要素をトラバースすることで実行できます[例

例

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>