web-dev-qa-db-ja.com

CSS子と子孫のセレクター

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

descendentセレクターは：

div p

p内のすべてのdivを選択するのは、それが即時の子孫であるかどうかに関係なくですか？ pが別のdiv内にある場合、それはまだ選択されますか？

次に、childセレクター：

div > p

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

<div><p>

対

<div><div><p>

両方が選択されますか？

csscss-selectors
282
iceangel89

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

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

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

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

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

44
Çağdaş Tekin

Bascailly、「ab」はa内のすべてのbを選択し、「a> b」は、b'saの子のみを選択します。 b何の子かb何の子かa。

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

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}

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

23
Ignas2526

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

子孫=>特定の祖先から派生した要素（例：ジョーと彼のhis祖父）

実際には：この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/

8
Snowcrash

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

7
rlovtang
div p 

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

div> p

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

3
user3351229