Wie kann ich Elemente mit ähnlichen Klassennamen in CSS effizient formatieren?

Verwendung von Platzhaltern in CSS für Klassen: * und Attributselektoren

Beim Stylen von Elementen mit mehreren Klassen, die einem bestimmten Muster folgen, kann es mühsam sein, separate Regeln dafür zu erstellen jede Variation. Hier kommen CSS-Platzhalter ins Spiel.

In Ihrem Fall möchten Sie eine Hintergrundfarbe auf mehrere Elemente mit Klassennamen wie „tocolor-1“, „tocolor-2“, „tocolor-3“ anwenden. usw. Die Verwendung eines Platzhalters wie „.tocolor-*“ scheint zwar eine Lösung zu sein, funktioniert aber in CSS nicht.

Stattdessen können Sie Attributselektoren nutzen, um dieses Ziel zu erreichen. Mit einem Attributselektor können Sie Elemente basierend auf ihren Attributen, wie z. B. der Klasse, als Ziel auswählen.

[class^="tocolor-"], [class*=" tocolor-"] {
  background: red;
}

In diesem Code zielt der Attributselektor [class^="tocolor-"] auf Elemente ab, deren Klassenattribut mit „ beginnt. tocolor-“, der effektiv alle Elemente mit Klassennamen wie „tocolor-1“, „tocolor-2“ usw. abgleicht.

Der Selektor [class*=" tocolor-"] zielt auf Elemente ab, deren Klasse Das Attribut enthält die Teilzeichenfolge „tocolor-“, gefolgt von einem Leerzeichen. Dies entspricht Elementen wie „tocolor-highlight“, „my-class tocolor-blue“ usw.

Durch die Verwendung von Attributselektoren können Sie Stile auf eine Gruppe von Elementen basierend auf ihrem gemeinsamen Muster anwenden, ohne dass dies erforderlich ist für ausführliche und sich wiederholende Klassendeklarationen.

Weitere Informationen zu CSS-Attributselektoren finden Sie in den folgenden Ressourcen:

• [CSS-Attribut Selektoren](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
• [CSS-Attributselektoren](https://www.w3schools.com/cssref/css_selectors .asp)

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente mit ähnlichen Klassennamen in CSS effizient formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!