CSS の「div p」セレクターと「div ~ p」セレクターの違いは何ですか?

Div P および Div ~ P セレクターについて

セレクター div p および div ~ p は、HTML 要素内の関係に基づいて HTML 要素をターゲットにします。ドキュメントツリー。ただし、この 2 つには微妙な違いがあります。

• Div P (プラス セレクター): すべての

  を選択します。

  の直後に続く要素
• Div ~ P (チルダセレクター): すべての

  を選択します。

  が前にある要素

  プラス セレクターを使用する場合

  指定された要素のすぐ隣の要素のみをターゲットにしたい場合にセレクターを使用します。要素。たとえば、

  がある場合、リストが含まれており、各リストの後の最初の段落を強調表示したい場合は、以下を使用できます。

  <code class="css">div + p {
    color: red;
  }</code>

  チルダ セレクターを使用する場合

  ~ セレクターを使用する間に他の要素がある場合でも、指定された要素の前にあるすべての要素をターゲットにしたい場合。たとえば、

  の後のすべての見出しを強調表示したい場合は、要素:

  <code class="css">div ~ h2 {
    color: blue;
  }</code>

  特殊なケース: 指定された要素の前にある要素を選択する

  指定された要素の直前に配置された要素を選択する必要がある場合は、次の方法があります。別のセレクター: 隣接する兄弟セレクター X Y.

  <code class="css">ul + p {
    color: red;
  }</code>

  このセレクターはすべての

  に一致します。

  の直後に続く要素要素の間に他の要素はありません。

以上がCSS の「div p」セレクターと「div ~ p」セレクターの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。