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

Styling mehrerer Elemente mit Platzhaltern in CSS

Beim Stylen von Elementen mit eindeutigen Bezeichnern kann es mühsam sein, für jedes einzelne Element separate Klassen zu erstellen. CSS bietet eine elegante Lösung mit dem Platzhalterzeichen *.

Verwendung von Platzhaltern für Klassen

In Ihrem Beispiel haben Sie mehrere Divs mit jeweils zwei Klassen, einer gemeinsamen Klasse ( tocolor) und eine individuelle Kennung (z. B. tocolor-1). Um sie mit einer einzelnen Klasse zu formatieren, können Sie die folgende Platzhaltersyntax verwenden:

.tocolor-* {
  background: red;
}

Wie Sie jedoch festgestellt haben, funktioniert diese Methode nicht in CSS.

Attributselektoren zur Rettung

Der richtige Ansatz besteht darin, Attributselektoren zu verwenden, mit denen Sie Elemente basierend auf dem Wert ihrer Attribute auswählen können. In diesem Fall können Sie das Klassenattribut verwenden:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red
}

• [class^="tocolor-"] wählt Elemente aus, deren Klassenattribut mit „tocolor-“ beginnt.
• [class*=" tocolor-"] wählt Elemente aus, deren Klassenattribut „tocolor-“ enthält.

In Ihrem Beispiel würden beide Bedingungen die Divs mit Klassen abgleichen tocolor-1, tocolor-2 usw.

Demo und weitere Informationen

Sie können eine Live-Demonstration dieser Lösung sehen unter:

[jsfiddle.net/K3693/1/](http://jsfiddle.net/K3693/1/)

Weitere Informationen zu CSS-Attributselektoren finden Sie im Folgenden Ressourcen:

• [CSS-Attribut Selektoren](https://www.w3.org/TR/selectors/#attribute-selectors)
• [MDN-Dokumente: Attributselektoren](https://developer.mozilla.org/en-US/ docs/Web/CSS/Attribute_selectors)

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