「div> p」と「div p」は同じですか？

StackOverflow https://stackoverflow.com/questions/3948846

  •  08-10-2019
  •  | 
  •  

質問

ねえ、私は明らかな質問があります。

のようなコードの場合：

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

一部の人々は次のようなセレクターを使用しています：

div > p {
     something
}

その他：

div p {
     something
}

この場合の違いは何ですか？私の意見では - なし？

ちなみに、子孫のアイテムは常に子供ではありませんか？！ 2つの違いは何ですか？私はw3.orgを読んでいますが、それを得ることができません:)

ありがとうございました！

役に立ちましたか？

解決

単純：

 div > p

影響のみに影響します 直接の子供たち。

 div p

孫、孫などに影響を与えます。 同じように。 （例に違いはありません）

子セレクター IE6によってサポートされていません.

他のヒント

Pekkaは理論的にそれを説明しました 彼の答え. 。彼の答えに基づいて、そして についての別の質問に対する私の答え > 組み合わせ, 、この質問に対処するために修正されたイラストを提供します。

HTMLの次のブロックと、CSSセレクターの例を考えてみましょう。 より精巧な例を使用して、両方のセレクターの違いを示すことができます。

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

どれの <p>sはどのセレクターによって選択されますか？

最初に、 それらはすべて一致します div p 彼らはそうだからです <p> 位置する要素 どこでも a <div> エレメント。

それは作ります div > p より具体的で、次の質問を請います：

どれの <p>Sはによって選択されます div > p?

  1. 選択しました

    この段落 <p> 最も外側の子供、または直接の子孫です <div>. 。つまり、他の要素以外にすぐに含まれていないことを意味します <div>. 。階層は、セレクターが説明するのと同じくらい簡単であり、そのため選択されています div > p.

  2. 選択されていない

    これ <p> にあります <blockquote> 要素、および <blockquote> 要素は最も外側にあります <div>. 。したがって、階層は次のようになります。

    div > blockquote > p

    段落はblockquoteに直接含まれるため、 いいえ によって選択されています div > p. 。しかし、それ できる マッチ blockquote > p （言い換えれば、それは <blockquote>).

  3. 選択しました

    この段落は内側にあります <div>, 、外側に含まれています <div>. 。階層は次のようになります：

    div > div > p

    もっとあるかどうかは関係ありません <div>sは互いにネストされている、または <div>Sは他の要素によって含まれます。この段落が独自に直接含まれている限り <div>, 、によって選択されます div > p.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top