CSS Tilde

In CSS ist die Tilde ein Waschzeilensymbol, das als „~“ dargestellt wird, das dargestellt wird. Es wird auch als "nachfolgender Geschwindigkeitskombinator" bezeichnet. Wir verwenden diesen Kombinator von Tilde oder anschließendem Geschwister, um zwei Verbindungsauswahlern zu trennen. Um es anders auszudrücken, können wir sagen, dass der Tilde -Selektor alle Geschwister des angegebenen Elements auswählt. In diesem Tutorial werden wir die Arbeit des Tilde -Selektors diskutieren. Wir werden diesen Tilde -Selektor in unseren Codes verwenden und Ihnen demonstrieren, wie er funktioniert.

Beispiel 1:

Für die Verwendung dieses Tilde -Selektors in CSS müssen wir zuerst eine HTML -Datei erstellen und diese Datei mit unserer CSS -Datei verknüpfen, in der wir den Tilde -Selektor verwenden werden. In diesem Beispiel erstellen wir eine DIV und in diesem Div haben wir eine Überschrift und zwei Absätze und ein „HR“ -Tag zwischen diesen beiden Absätzen. Dieses „HR“ -Tag wird verwendet, um eine thematische Pause zwischen den Absätzen darzustellen. Nach Abschluss dieses HTML -Code werden wir nun zur CSS -Datei übergehen, in der wir diesen Tilde -Selektor verwenden.

Im Folgenden finden Sie unseren CSS-Code, in dem wir die Überschrift stylen, indem wir seine „Farbe“ in „grün“ ändern und sie in der „Mitte“ ausrichten, indem sie die Eigenschaft „Text-Align“ verwenden. Wir haben auch seine „Schriftfamilie“ geändert und sie auf „algerisch“ gesetzt. Nach dem Stylen der Überschrift verwenden wir den Tilde -Selektor. Das erste Element ist das „HR“ und das zweite ist „P“. Wir verwenden diesen Tilde -Selektor, um alle Absätze auszuwählen, denen die „HR“ vorausgeht und dann einige Styling -Eigenschaften auf diese Absätze anwendet. Wir richten den Text auf "Rechtfertigen" aus und setzen die Farbe des Hintergrunds mithilfe der Eigenschaft "Hintergrundfarbe" und verwenden das "Pulverblau" dafür. Die Eigenschaft „Schriftgröße“ wird ebenfalls verwendet und gibt dieser Eigenschaft den Wert von „120%“ an. Dann wird "Algerian" als "Schriftfamilie" ausgewählt. Alle diese Eigenschaften gelten für die Absätze, denen die „HR“ vorausgeht, die vorangegangen sind.

Schauen Sie sich die folgende Ausgabe an, alle Eigenschaften, die wir oben in der CSS -Datei verwendet haben, werden nur auf den Absatz angewendet, der dem „HR“ voraussetzt. Der obige Absatz bleibt unverändert, aber der zweite Absatz nach dem „HR“ wird geändert und das gesamte Styling wird auf diesen Absatz angewendet. Dies liegt nur an den Tilde -Selektor.

Beispiel # 2:

Hier setzen wir einen Div. In dieser DIV haben wir zwei Absätze und einen Überschrift gesetzt. Danach setzen wir eine weitere DIV in diesem ersten Div und setzen einen Absatz ein und schließen diesen zweiten Div. Außerhalb der zweiten DIV setzen wir einen weiteren Absatz und gehen auf. Dann schließen Sie die erste DIV hier. Nach dem Schließen der ersten DIV erneut zwei Absätze setzen. Und schließen Sie dann das Körpermarke.

Hier setzen wir den Tilde -Selektor und platzieren „P“ als erstes Element und auch „P“ als zweites Element dann als „P ~ P“. Es bedeutet, dass der erste „P“ dem zweiten „P“ vorausgeht. Es wird das gesamte „P“ auswählen, dem das erste „P“ folgt. Alle zweiten „P“, gefolgt von der ersten „P“, werden entsprechend gestylt. Wir verwenden die Eigenschaft "Farbe", die die Farbe der Schriftart des Absatzes festlegt und auf "Schwarz" eingestellt wird. Die Größe der Schriftart, die wir hier einstellen, lautet "20px". Wir verwenden das Schlüsselwort „Fett“ als Wert von „Schriftgewicht“. Und Auswahl der „Calibri“ „Schriftfamilie“ dafür. Die "Hintergrundfarbe" wird in "Light Coral" angezeigt, da wir diese Farbe hier als "Hintergrundfarbe" auswählen.

In der folgenden Ausgabe können Sie feststellen. Durch die Verwendung des Tilde -Selektors wählen wir alle zweiten Absätze vor dem ersten Absatz aus.

Beispiel # 3:

In diesem Code haben wir eine DIV und dann eine ungeordnete Liste außerhalb der DIV. Nach dem Schließen dieser Liste schreiben wir einen Absatz mit "P" -Tags und erstellen dann eine zweite Liste unter diesem Absatz. Wenn diese zweite Liste endet, schreiben wir eine Überschrift mit "H2" -Tags. Nach dieser Überschrift haben wir eine andere Liste. Alle Listen sind hier ungeordnete Listen.

Wir verwenden "P" und dann den Tilde -Selektor. Nach dem Tilde -Selektor haben wir „UL“, was bedeutet, dass es alle „UL“ auswählt, denen der „P“ vorausgeht, der vorangestellt wird, dass das „P“ voraussetzt. Wir verwenden einige Styling -Eigenschaften, um der „UL“ Stil zu verleihen, um Ihnen den Unterschied zu machen, wie diese Tilde Elemente ausgewählt hat, und das angegebene Styling auf die ausgewählten Elemente anwenden. Wir verwenden zuerst die Eigenschaft "Farbe" und setzen "grün" für die Textfarbe. Die ausgewählten Elemente rendern also in einer „grünen“ Farbe. Wir erhöhen auch die "Schriftgröße" auf "22px" und setzen die "Schriftfamilie" auf "Algerian" fest. Wir setzen die „Hintergrundfarbe“ in RGB-Form und setzen es als „RGB (235, 235, 125)“, das wie gelbe Farbe aussieht.

Hier zeigt die Ausgabe, dass die erste Liste einfach ist und es in der ersten Liste nicht geändert wird, dass sie nicht vor dem Absatz vorhanden ist, und nicht vor dem Absatz vorhanden. Den beiden anderen Listen werden beide Listen der „P“ vorangegangen. Diese beiden Listen sind nach dem Absatz vorhanden, so dass sie ausgewählt und dann gestylt wurden.

Beispiel Nr. 4:

Hier können Sie sehen, dass wir eine DIV und eine Überschrift darin erstellt haben. Dann zwei Absätze außerhalb dieser Div. Darunter haben wir noch ein Div und die Überschrift wie oben und haben zwei Absätze erstellt.

Wir verwenden das „Div“ als erste Selektor und tilgen und dann „P“ als zweite Selektor. Es wird alle Absätze benötigen, gefolgt von der Div. Der „Hintergrund“, den wir hier eingestellt haben, lautet "RGB (111, 212, 111)", eine hellgrüne Farbe. Wir verwenden "blau" als "Farbe", damit der Text "blau" erscheint. Wir richten es auch auf das „Zentrum“ der Linie aus. Und "Georgia" ist seine "Schriftfamilie", wie wir hier ausgewählt haben. Wir „fett“ diesen Text auch, indem wir „fett“ als Wert von „Schriftgewicht“ verwenden,. Die "Schriftgröße" ist diesmal "25px" und es ist auch "kursiv" in "Font-Stil".

Alle Absätze werden in der Ausgabe ausgewählt, da alle Absätze der Div vorgehen . Es wählt also alle Absätze aus, und wir können sehen, dass alle von uns verwendeten Eigenschaften auf diese Absätze angewendet werden. Der Tilde -Selektor hilft bei der Auswahl aller Absätze, gefolgt von der Div und bei der Anwendung von Eigenschaften innerhalb der lockigen Klammern dieser.

Abschluss:

Wir haben dieses Tutorial für das Erlernen des Tilde -Selektors in CSS vorgestellt. Hier haben wir besprochen, was Tilde -Selektor ist und wie dieser Tilde -Selektor in CSS verwendet wird und wie er funktioniert. Wir haben den ersten Selektor und dann den Tilde -Selektor und dann den zweiten Selektor platziert. Wie wir erklärt haben, dass es den zweiten Selektor auswählt, dem der erste Selektor mit Hilfe des Tilde -Selektors folgt. Wir haben hier in diesem Tutorial mehrere Beispiele gezeigt.