css - (p スパン) と (p > スパン) の違いは何ですか?

Question

私は非常に混乱しており、 と の両方の不適切な使用により、コードがどのように損傷を受ける可能性があるかを知りたいと思っていp > spanますp span。pに関係のないセレクターについて言及していspanます。

Answer 1

p spanどのようにネストされていても、たまたま p 要素内にあるすべてのスパンをターゲットにします。

p > spanp 要素の直接の子孫であるスパンのみをターゲットにします。

例えば。

<p><div><span>this will match the first but not the second</span></div></p>

<p><span>this will match both</span></p>

Answer 2

p spanSPAN要素内の任意の場所にあるa を意味しPます。以下の例ではspan1、 、span2、 となりspan3ます。

p > spanSPAN要素の直接の子である を意味しPます。例ではspan1とspan3ですが、 ではありませんspan2。

要素がある場合：

<p>
  <span id="span1"></span>
  <div><span id="span2"></span></div>
  <span id="span3"></span>
</p>