CSS Wildcard Selector
Platzhalter -Selektoren
- Der [Attribut*= "Wert"] ist ein Wildcard -Selektor, der zum Auffinden von Elementen verwendet wird, deren Attributwert die Zeichenfolge enthält, die wir hier als Wert gegeben haben.
- Der [Attribute = ”Wert”] ist ein Wildcard -Selektor, der zum Auffinden von Elementen verwendet wird, deren Attributwert mit der Zeichenfolge beginnt, die wir hier als Wert angegeben haben.
- Der [Attribut $ = ”Wert”] Selector ist ein Wildcard -Selektor, der zum Auffinden von Elementen verwendet wird, deren Attributwert mit der Zeichenfolge endet, die wir hier als Wert gegeben haben.
Beispiel 1
Wir starten unseren Code und führen diese Codes im Visual Studio -Code durch. Erstens öffnen wir eine neue Datei. Dann wählen wir HTML als Sprache und setzen dann "!"Und drücken Sie" Eingänglich ". Alle HTML -Basis -Tags erscheinen hier. Wir müssen also nicht all diese Tags manuell hinzufügen. Wir haben gerade das "Link" -Tag in den "Kopf" eingerichtet, in dem wir den Namen der CSS -Datei einfügen. Im Körper setzen wir eine Überschrift und einige Div -Behälter und einige Absätze. Alle Divs und Absätze enthalten unterschiedliche Klassennamen, sodass wir diese Namen als Wert im Wildcard -Selektor für die Auswahl der Elemente in CSS verwenden. Anschließend werden wir die ausgewählten Elemente ein anderes Styling anwenden.
Wir setzen die Syntax des Wildcard -Selektors [Klasse * = „Str“] ein, der alle Elemente auswählt, deren Klassenname „Str“ enthält. Wir geben „Str“ als Wert dieses Wildcard -Selektors vorbei. Wir werden einige Eigenschaften anwenden, damit Sie leicht feststellen, wie die Elemente ausgewählt werden und den Stil auf alle anwendet. Wir setzen "schwarz" als "Hintergrund" für alle Elemente, die in ihren Klassennamen "Str" enthalten.
Wir setzen den Text „Farbe“ auf „weiß“, weil wir Schwarz für den Hintergrund verwendet haben. Wir verändern auch die Größe des Textes, indem wir die Eigenschaft „Schriftgröße“ verwenden und auf „18PX“ setzen. Wir richten auch den Text der ausgewählten Elemente auf das „Zentrum“ aus, unter Verwendung der Eigenschaft „Schriftfamilie“ und setzen sie auf die Schriftart „Arial“. Das Gewicht der Schriftart der ausgewählten Elemente ist auf „fett“ eingestellt. Wir bieten auch die Ausgabe von Codes in diesem Tutorial an. Sehen Sie sich die Ausgabe an und überprüfen Sie, wie Elemente ausgewählt und alle diese Eigenschaften auf die ausgewählten Elemente angewendet werden.
Die Ausgabe zeigt, dass alle Elemente ausgewählt werden, deren Klassennamen „STR“ enthalten, und die Eigenschaften, die wir im CSS -Code verwendet haben, werden alle auf die ausgewählten Elemente angewendet.
Beispiel 2
Wir haben wieder mehrere Div -Klassen und mehrere Absätze mit unterschiedlichen Klassennamen und eine Überschrift am Anfang. Wir werden den Wildcard -Selektor in CSS anwenden und die Elemente aus dieser HTML -Datei auswählen und den Stil dieser ausgewählten Elemente verändern.
Wir verwenden die zweite Syntax der Wildcard in diesem Beispiel, nämlich [Klasse $ = „Str“]. Es wird alle Elemente ausgewählt, deren Klassennamen mit der String „Str“ enden. Wir wenden auch die angegebenen Styling -Eigenschaften an, die wir auf den ausgewählten Elementen verwenden. Wir dekorieren den ausgewählten Text mit der Eigenschaft „Text-Decorate“ und setzen „Untersteuerung“ für diese Eigenschaft. Wir haben die „Farbe“ des Textes in „Maroon“ geändert. Wir verwenden auch die Eigenschaft „Schriftgröße“ und platzieren „22px“ als Wert, um die Größe des Textes zu ändern. Wir verwenden auch das Attribut "Schriftfamilie", um die Schriftart auf "Times New Roman" zu setzen, und das "Schriftgewicht" des ausgewählten Elements wurde auf "BOLD" gesetzt.”
Hier sehen Sie alle Klassen, deren Namen mit der String „Str“ enden, ausgewählt und geändert werden. Alle Eigenschaften, die wir in den CSS beschrieben haben, werden hier auf die Elemente angewendet, deren Klassennamen bei „Str“ enden. Dies alles liegt an der Verwendung des Wildcard -Selektors.
Beispiel 3
Diese HTML -Datei ist die gleiche wie oben. Wir ändern nur die Namen der Klassen von Div und Absatz. Wir werden die dritte Syntax des Wildcard -Selektors in CSS für diesen Code verwenden.
In diesem Beispiel werden wir die dritte Syntax der Wildcard verwenden, die [Klasse^= „Str“] ist, und es wird alle Elemente ausgewählt, deren Klassenname mit der Zeichenfolge „Str“ beginnt. Für alle Elemente mit „Str“ zu Beginn der Klassennamen setzen wir „Pink“ als „Hintergrund“ als „Hintergrund“. Wir haben die „Farbe“ des Textes in „Rot“ geändert. Wir verwenden die Eigenschaft „Schriftgröße“ und geben sie in „22px“ an, um die Größe des Textes zu ändern. Wir verwenden auch das Attribut „Schriftfamilie“, um die Schriftart auf "Calibri" zu definieren und den Text der ausgewählten Elemente in das „Zentrum“ zu verschieben. Der Schriftstil der spezifischen Elemente wurde hier auf „kursiv“ eingestellt.
In diesem Screenshot werden all diese Elemente bezeichnet, deren Klassenname mit der String „Str“ beginnt. Der Wildcard -Selektor wählt alle diese Elemente aus und wendet alle Eigenschaften auf sie an. Sie können dies auch in der Ausgabe sehen.
Beispiel 4
Wir werden den vorherigen HTML -Code ein wenig ändern. Wir fügen weitere Div -Container hinzu und fügen in der vorherigen HTML.
In diesem Code wenden wir zunächst ein gewisses Design auf die Überschrift und verändern die „Schriftfamilie“ auf „Algerianer“. Wir stellen auch die Überschrift in der „Mitte“ ein, indem wir die Eigenschaft „Text-Align“ verwenden. Das Eigentum „Textdekoration“ ist hier, das wir uns als „unterstreichen“ bezeichnet haben, sodass es die Unterstufe für die Überschrift anzieht. Die "Farbe" dafür wird als "Kastanienbranchen" festgelegt.
Dann verwenden wir den Wildcard -Selektor, in dem wir "*" und "Str" als Wert platziert haben. Es wird also alle Klassen ausgewählt, die in ihrem Klassennamen „Str“ enthalten. Wir verwenden auch einige Eigenschaften, die für die ausgewählten Elemente gelten. Nachdem wir die Stileigenschaften für diesen Wildcard -Selektor festgelegt haben, bewegen wir uns auf den nächsten Wildcard -Selektor, der "[Klasse^=" par "]" alle Elemente auswählt, in denen die Klassennamen mit der Zeichenfolge "Par" beginnen und sich anwenden und sich anwenden. Diese gegebenen Eigenschaften für diese Elemente.
Jetzt verwenden wir den letzten Wildcard -Selektor hier, den wir als "[Klasse $ =" div "] schreiben". Es wird also die Elemente ausgewählt, deren Klassenname an der String „Div“ endet, und wendet auch die angegebenen Eigenschaften auf alle an. Alle diese Wildcard -Selektoren ignorieren die Elemente, die den Zustand dieser Wildcard -Selektoren nicht erfüllen.
Schauen Sie sich diese Ausgabe an, die Elemente, die in den Klassennamen „Str“ enthalten Der Klassenname ist der gleiche. Und diese Elemente, die im Klassennamen nicht „Str“ enthalten, und auch ihre Klassennamen beginnen nicht mit „par“ und enden nicht an der „Div“. Es wird keine Immobilie an sie angewendet.
Abschluss
Das Ziel, dieses Tutorial zu schreiben. Wir haben die CSS -Wildcard -Selektoren untersucht und Ihnen erklärt. Wir haben besprochen, dass die Wildcard -Selektoren zur gleichzeitigen Auswahl mehrerer Elemente verwendet werden und zur Anwendung von Stylingeigenschaften auf die Elemente verwendet werden, die wir mit diesen Wildcard -Selektoren ausgewählt haben. Wir haben auch Beispiele gezeigt, in denen wir diese Wildcard -Selektoren verwendet haben und die Ausgaben aller Beispiele in diesem Tutorial bereitgestellt haben.