Heim > Artikel > Web-Frontend > Platzhalterselektoren (*, ^ und $) in CSS für Klassen
In CSS werden Selektoren verwendet, um Elemente nach Klassenname, ID, Tag usw. auszuwählen. In CSS sind auch einige Platzhalterselektoren verfügbar, mit denen wir Abfragen definieren können, die HTML-Elemente auswählen.
Wildcard-Selektoren ermöglichen es uns, HTML-Elemente auszuwählen, die einen bestimmten Teilstring im Wert eines bestimmten Attributs (z. B. Klasse oder ID) enthalten. In diesem Tutorial lernen wir, die Platzhalterselektoren *, ^ und $ zur Darstellung von Klassen und IDs zu verwenden.
Mit dem Platzhalter-Selektor „Contains (*=)“ können Entwickler alle HTML-Elemente finden, deren Attributwert „string“ als Teilzeichenfolge enthält. Wenn Sie beispielsweise den Platzhalter-Selektor „*“ für eine Klasse verwenden, werden alle HTML-Elemente gefunden, deren Klassenname diese Zeichenfolge enthält.
Benutzer können Platzhalterselektoren mit (*) für Klassen gemäß der folgenden Syntax verwenden.
[class*="string"] { }
Die obige Syntax wählt alle HTML-Elemente aus, die „string“ als Teilstring im Klassennamen enthalten.
Im folgenden Beispiel haben wir vier verschiedene div-Elemente erstellt und ihnen basierend auf ihren Klassennamen Text hinzugefügt. In CSS verwenden wir den Platzhalterselektor „contains“, um alle div-Elemente auszuwählen, deren Klassenname „test“ als Teilzeichenfolge enthält.
In der Ausgabe kann der Benutzer beobachten, dass die Textfarbe der ersten beiden div-Elemente rot ist, da sie den Klassennamen mit der Teilzeichenfolge „test“ enthalten.
<html> <head> <style> [class*="test"] { color: red; font-size: 2rem; } </style> </head> <body> <h2> Using the <i> contains (*=) </i> wildcard CSS selector in CSS. </h2> <div class = "test1"> This is a text with the class name test1.</div> <div class = "sampletest"> This is a text with the class name sampletest. </div> <div class = "demo"> This is a text with the class name demo test. </div> <div class = "element"> This is a text with the class name element.</div> </body> </html>
Starten mit (^=) Wildcard-Selektoren ermöglichen es uns, alle HTML-Elemente auszuwählen, deren Attributwerte mit einer bestimmten Teilzeichenfolge beginnen.
Benutzer können Selektoren, die mit Platzhalterzeichen beginnen, für Klassen gemäß der folgenden Syntax verwenden.
[class^="string"] { }
Die obige Syntax wählt alle HTML-Elemente aus, deren Klassenname mit „string“ beginnt.
Im folgenden Beispiel haben wir Platzhalter-CSS-Selektoren verwendet, die mit (^=) beginnen, und Klassen, um Elemente basierend auf Klassennamen auszuwählen.
In der Ausgabe kann der Benutzer beobachten, dass der Text des ersten und dritten div-Elements blau wird, weil er am Anfang die Zeichenfolge „test“ enthält. Das zweite div-Element enthält „test“ im Klassennamen, steht jedoch am Ende des Klassennamens und wird daher nicht vom führenden Platzhalterselektor (^=) ausgewählt.
<html> <head> <style> [class^="test"] { color: blue; font-weight: bold; } </style> </head> <body> <h2> Using the <i> starts with (^=) </i> wildcard CSS selector in CSS </h2> <div class = "test1"> This is a text with the class name test1.</div> <div class = "sampletest"> This is a text with the class name sampletest. </div> <div class = "testdemo"> This is a text with the class name testdemo test. </div> <div class = "element"> This is a text with the class name element. </div> </body> </html>
Ein Platzhalterselektor mit der Endung ($=) wählt alle HTML-Elemente aus, wenn ein bestimmter Attributwert am Ende eine Teilzeichenfolge enthält. Wenn beispielsweise die Klassennamen zweier verschiedener Elemente „onestart“ und „lastone“ lauten und die Teilzeichenfolge „one“ ist, wird ein HTML-Element nur mit dem Klassennamen „lastone“ ausgewählt, da es das erste Ende der Teilzeichenfolge enthält .
Benutzer können Platzhalter-CSS-Selektoren, die mit ($=) enden, für Klassen gemäß der folgenden Syntax verwenden.
[class$="string"] { }
Die obige Syntax wählt alle HTML-Elemente aus, deren Klassenname mit der Teilzeichenfolge „string“ endet.
Im folgenden Beispiel enthalten das zweite nd und das vierte div-Element die Teilzeichenfolge „test“ am Ende des Klassennamenwerts. Wir verwenden einen CSS-Selektor mit einem ($=)-Platzhalter am Ende, um zwei div-Elemente auszuwählen und ihnen Rahmen, Ränder und Auffüllungen hinzuzufügen.
<html> <head> <style> [class$="test"] { border: 2px solid pink; padding: 5px 10px; margin: 5px; } </style> </head> <body> <h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2> <div class = "test1"> This is a text with the class name test1.</div> <div class = "sampletest"> This is a text with the class name sampletest. </div> <div class = "testdemo"> This is a text with the class name testdemo test. </div> <div class = "elementtest"> This is a text with the class name elementtest. </div> </body> </html>
Im folgenden Beispiel verwenden wir CSS-Selektoren, die auf id enden, anstatt Klassen als Attribute zu verwenden. Es zeigt, wie man HTML-Elemente mithilfe anderer Eigenschaften und Platzhalter-CSS-Selektoren auswählt.
Hier wählen wir alle HTML-Elemente aus, deren ID-Wert am Ende „Name“ enthält, und ändern den Schriftstil und die Farbe.
<html> <head> <style> [id$="name"] { color: lightskyblue; font-style: italic; font-size: 1.5rem; } </style> </head> <body> <h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2> <div id = "firstname"> id == firstname </div> <div id = "lastname"> id == lastname </div> <div id = "age"> id == age </div> <div id = "namestart"> id == namestart </div> </body> </html>
Der Benutzer hat gelernt, wie man Wildcard-CSS-Selektoren mit Klassen verwendet. Benutzer können den CSS-Selektor „enthält (*=)“ verwenden, um Elemente abzurufen, deren Attributwert eine Teilzeichenfolge in der Mitte enthält, und den CSS-Selektor (^=) verwenden, um Elemente abzurufen, deren Attributwert am Anfang eine Teilzeichenfolge enthält und mit ($) endet ). =) Das Ende.
Darüber hinaus lernten Benutzer, wie sie Wildcard-CSS-Selektoren mit anderen Eigenschaften verwenden, wie z. B. id im vorherigen Beispiel.
Das obige ist der detaillierte Inhalt vonPlatzhalterselektoren (*, ^ und $) in CSS für Klassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!