Was ist der Unterschied zwischen den Selektoren „div p' und „div ~ p' in CSS?-CSS-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-11-01 09:03:30

Original

649 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Dieser Selektor entspricht allen

Elemente, die direkt auf

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!

Quelle：php.cn

Vorheriger Artikel：Wie deaktiviere ich das horizontale Scrollen auf meiner Website? Nächster Artikel：Wie erstelle ich mit CSS eine unregelmäßige quadratische Form?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

1726

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

1884

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1597

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...