Heim > Artikel > Web-Frontend > Platzhalterselektoren (*, ^ und $) in CSS für Klassen

Platzhalterselektoren (*, ^ und $) in CSS für Klassen

王林nach vorne: 2023-09-04 09:57:111561Durchsuche

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.

CSS enthält (*=) Platzhalterselektor

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.

Grammatik

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.

Beispiel

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>

CSS-Wildcard-Selektoren beginnend mit (^=)

Starten mit (^=) Wildcard-Selektoren ermöglichen es uns, alle HTML-Elemente auszuwählen, deren Attributwerte mit einer bestimmten Teilzeichenfolge beginnen.

Grammatik

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.

Beispiel

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>

CSS endet mit ($=) Wildcard-Selektor

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 .

Grammatik

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.

Beispiel

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>

Beispiel

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So animieren Sie ein Füllmuster mit CSSNächster Artikel：So animieren Sie ein Füllmuster mit CSS

In Verbindung stehende Artikel

Mehr sehen