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!
