「div> p」と「div p」は同じですか?
-
08-10-2019 - |
質問
ねえ、私は明らかな質問があります。
のようなコードの場合:
<div>
<p>We want to format this text :)</p>
</div>
一部の人々は次のようなセレクターを使用しています:
div > p {
something
}
その他:
div p {
something
}
この場合の違いは何ですか?私の意見では - なし?
ちなみに、子孫のアイテムは常に子供ではありませんか?! 2つの違いは何ですか?私はw3.orgを読んでいますが、それを得ることができません:)
ありがとうございました!
解決
他のヒント
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
?
選択しました
この段落
<p>
最も外側の子供、または直接の子孫です<div>
. 。つまり、他の要素以外にすぐに含まれていないことを意味します<div>
. 。階層は、セレクターが説明するのと同じくらい簡単であり、そのため選択されていますdiv > p
.選択されていない
これ
<p>
にあります<blockquote>
要素、および<blockquote>
要素は最も外側にあります<div>
. 。したがって、階層は次のようになります。div > blockquote > p
段落はblockquoteに直接含まれるため、 いいえ によって選択されています
div > p
. 。しかし、それ できる マッチblockquote > p
(言い換えれば、それは<blockquote>
).選択しました
この段落は内側にあります
<div>
, 、外側に含まれています<div>
. 。階層は次のようになります:div > div > p
もっとあるかどうかは関係ありません
<div>
sは互いにネストされている、または<div>
Sは他の要素によって含まれます。この段落が独自に直接含まれている限り<div>
, 、によって選択されますdiv > p
.