Wie kann ich Elemente mit Klassennamen, die mit einer bestimmten Zeichenfolge beginnen, in CSS formatieren?

Elemente mit Klassennamen stilisieren, die mit einer bestimmten Zeichenfolge beginnen

In CSS3 ist es möglich, einen Platzhalter zu verwenden, um Elemente abzugleichen, deren Klassennamen mit einer bestimmten Zeichenfolge beginnen. Dadurch können Sie mehrere Elemente mit ähnlichen Klassennamen auf prägnante und effiziente Weise formatieren.

Beachten Sie die folgende HTML-Struktur:

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

Um alle diese Divs mit derselben Farbe zu formatieren, Wir können die folgende CSS-Regel verwenden:

div[class^='myclass'], div[class*=' myclass'] {
    color: #f00;
}

So funktioniert diese Regel:

• class^='myclass' stimmt mit allen Elementen überein, deren Klassenname mit der Zeichenfolge „myclass“ beginnt ." In diesem Fall werden die drei oben genannten Divs ausgewählt.
• class*='myclass' stimmt mit allen Elementen überein, deren Klassenname irgendwo darin den Teilstring „myclass“ enthält. Außerdem werden die drei Divs ausgewählt.

Die Farbe: #f00; Die Eigenschaft setzt die Farbe aller ausgewählten Elemente auf Rot.

Durch die Verwendung dieses Platzhalter-Ansatzes können Sie die Stile mehrerer Elemente mit ähnlichen Klassennamen problemlos aktualisieren, ohne jeden einzelnen Klassennamen in der CSS-Regel angeben zu müssen.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente mit Klassennamen, die mit einer bestimmten Zeichenfolge beginnen, in CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!