Platzhalter * in CSS für Klassen

Question

Ich habe diese Divs, die ich mit .tocolor style, aber ich brauche auch den eindeutigen Bezeichner 1,2,3,4 usw., daher füge ich ihn als weitere Klasse hinzu tocolor-1.

   tocolor 1   
   tocolor 2   
   tocolor 3   
   tocolor 4   

.tocolor{
  background: red;
}

Gibt es eine Möglichkeit, nur 1 Klasse tocolor-* zu haben. Ich habe versucht, einen Wildcard * in diesem CSS zu verwenden, aber es hat nicht funktioniert.

.tocolor-*{
  background: red;
}

Answer 1

Was du brauchst, nennt sich Attributselektor. Ein Beispiel für deine HTML-Struktur ist folgendes:

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

Anstelle von div kannst du jedes Element hinzufügen oder es ganz entfernen, und anstelle von class kannst du jedes Attribut des angegebenen Elements hinzufügen.

[class^="tocolor-"] — beginnt mit "tocolor-".
[class*=" tocolor-"] — enthält die Zeichenfolge "tocolor-", die direkt nach einem Leerzeichen vorkommt.

Demo: http://jsfiddle.net/K3693/1/

Weitere Informationen zu CSS-Attributselektoren findest du hier und hier. Und von MDN Docs MDN Docs

Answer 2

Ja, du kannst das tun.

*[id^='term-']{
    [css hier]
}

Dies wählt alle IDs aus, die mit 'term-' beginnen.

Was den Grund für das Nichttun betrifft, sehe ich, wo es bevorzugt wäre, auf diese Weise auszuwählen; was den Stil betrifft, würde ich es selbst nicht tun, aber es ist möglich.

Answer 3

Eine alternative Lösung:

div[class|='tocolor'] wird für Werte des Attributes "class" übereinstimmen, die mit "tocolor-" beginnen, einschließlich "tocolor-1", "tocolor-2", usw.

Achten Sie darauf, dass dies nicht übereinstimmt

Referenz: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Stellt ein Element mit dem att Attribute dar, dessen Wert entweder genau "val" ist oder mit "val" beginnt, unmittelbar gefolgt von "-" (U+002D)

Answer 4

Wenn Sie die eindeutige Kennung für die weitere Gestaltung der Divs nicht benötigen und HTML5 verwenden, können Sie versuchen, benutzerdefinierte Datenattribute zu verwenden. Lesen Sie weiter hier oder versuchen Sie eine Google-Suche nach HTML5 benutzerdefinierte Datenattribute