html - CSS で ">" を使用する理由

Question

div 内のすべての p 要素にスタイリングを追加したい場合、なぜ使用する必要があるのですか?

div > p{

  *style here*

}

ただではなく

div p{

  *style here*

}

さらに、疑似クラスを使用したい場合、なぜ ">" を使用することを選択するのでしょうか?

div > p:first-child{

  *style here*

}

それ以外の

 div p:first-child{

   *style here*

 }

メリットやデメリットはありますか？そのオペレーターは何をしますか？

score 19 · Accepted Answer

再帰的な一致ではなく、直接の子です。

CSS

div > p {

}

HTML

<div>
   <p>Match</p>
   <span>
      <p>No match</p>
   </span>
</div>

CSS

div p {

}

マークアップ

<div>
   <p>Match</p>
   <span>
      <p>Match</p>
   </span>
</div>

score 3 · Accepted Answer

直系の子ということですから。

2番目の例はp、この例の

<div>
  <header>
    <p>
    </p>
  </header>
</div>

score 1 · Accepted Answer

>および(スペース) は、それぞれ「子」と「子孫」を意味する関係セレクターです。他の人が指摘したセマンティックの違いに加えて、子セレクターは、一致しない要素での冗長な DOM ツリートラバーサルを回避するため、計算が高速になります。

3 に答える 3