Wie kann ich mithilfe von CSS-Selektoren mehrere Divs mit ähnlichen Klassennamen formatieren?

Verwendung von Platzhaltern in CSS-Klassen

In Ihrer Abfrage möchten Sie mehrere Divs mit der gemeinsamen Klasse „tocolor“ formatieren und dabei eindeutige Bezeichner (z. B. tocolor-1) einbeziehen , tocolor-2). Sie haben versucht, dies mit dem Platzhalter „*“ in CSS zu vereinfachen, aber es war erfolglos.

Um Ihr gewünschtes Ergebnis zu erzielen, führen wir Attributselektoren in CSS ein. Mit Attributselektoren können Sie Elemente basierend auf bestimmten Attributen, wie z. B. ihrem Klassenwert, gezielt ansprechen.

Für Ihr Szenario können Sie den folgenden CSS-Selektor verwenden:

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

So funktioniert es:

• [class^="tocolor-"]: Dieser Selektor stimmt mit Elementen überein, deren Klassenattribut mit beginnt „tocolor-“.
• [class*=" tocolor-"]: Dieser Selektor sucht nach Elementen, deren Klassenattribut an einer beliebigen Stelle in der Zeichenfolge „tocolor-“ enthält, dem ein Leerzeichen vorangestellt ist.

Durch die Kombination dieser beiden Selektoren können Sie auf jedes Element mit einer Klasse abzielen, die eines dieser Kriterien erfüllt.

Zum Beispiel mit dem folgenden HTML Struktur:

<div class="tocolor tocolor-1">tocolor 1</div>
<div class="tocolor tocolor-2">tocolor 2</div>
<div class="tocolor tocolor-3">tocolor 3</div>

Durch Anwenden des oben genannten CSS-Selektors wird die Farbe aller dieser Divs auf Rot gesetzt.

Schauen Sie sich diese interaktive Demo auf JSFiddle an: http://jsfiddle.net/K3693 /1/

Ausführlichere Informationen zu CSS-Attributselektoren finden Sie im Folgenden Ressourcen:

• CSS-Attributselektoren (W3Schools): https://www.w3schools.com/cssref/css_selectors.asp
• Attributselektoren (MDN-Webdokumente): https:/ /developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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