Was ist der Unterschied zwischen den Selektoren „div p' und „div ~ p' in CSS?

Die Selektoren Div P und Div ~ P verstehen

Die Selektoren div p und div ~ p zielen auf HTML-Elemente basierend auf ihrer Beziehung innerhalb der ab Dokumentenbaum. Es gibt jedoch einen subtilen Unterschied zwischen den beiden.

• Div P (plus Selektor): Wählt alle

  Elemente, die unmittelbar auf

  folgen Elemente, ohne dazwischenliegende Elemente.
• Div ~ P (Tilde-Selektor): Wählt alle

  Elemente, denen

  vorangestellt ist Elemente, unabhängig von der Entfernung.

Wann Sie den Plus-Selektor verwenden sollten

Verwenden Sie den Selektor, wenn Sie nur auf das Element zielen möchten, das unmittelbar an das angegebene Element angrenzt Element. Wenn Sie beispielsweise ein

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

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

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