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

Wenn Sie eine Liste enthalten und den ersten Absatz nach jeder Liste hervorheben möchten, können Sie Folgendes verwenden:

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

Wann Sie den Tilde-Selektor verwenden sollten

Verwenden Sie den ~-Selektor wenn Sie auf alle Elemente abzielen möchten, denen das angegebene Element vorangeht, auch wenn andere Elemente dazwischen liegen. Wenn Sie beispielsweise alle Überschriften nach

Elemente:

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

Ein Sonderfall: Auswählen von Elementen vor einem bestimmten Element

Wenn Sie Elemente auswählen müssen, die unmittelbar vor einem bestimmten Element platziert sind, gibt es dies ein anderer Selektor: benachbarter Geschwisterselektor X Y.

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

Dieser Selektor entspricht allen

Elemente, die direkt auf

Elemente, ohne weitere Elemente dazwischen.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen den Selektoren „div p“ und „div ~ p“ in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html if for select this ul

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie deaktiviere ich das horizontale Scrollen auf meiner Website?Nächster Artikel：Wie deaktiviere ich das horizontale Scrollen auf meiner Website?

In Verbindung stehende Artikel

Mehr sehen

• Können Sie die Hintergrundfarbe von Auswahllistenoptionen beim Hover mit HTML und CSS ändern?
• Warum funktioniert mein Inset-Box-Schatten bei Bildern in CSS nicht?
• Wie kann ich mithilfe der absoluten Positionierung ein Dreieck in die Ecke eines Div zeichnen?
• Wie behebt man Hintergrundbildprobleme für ausgewählte Dropdowns in Chrome?
• Wie kann verhindert werden, dass CSS-Übergänge beim Laden der Seite in Google Chrome ausgelöst werden?