suchen

Heim >Web-Frontend >CSS-Tutorial >Was ist der Unterschied zwischen den Selektoren „div p' und „div ~ p' in CSS?

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

Linda Hamilton
Linda HamiltonOriginal
2024-11-01 09:03:30731Durchsuche

What's the Difference between the `div p` and `div ~ p` Selectors 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