Können CSS-Platzhalter das Styling dynamischer Klassen mit eindeutigen Bezeichnern optimieren?

Verwendung von CSS-Platzhaltern für dynamisches Klassen-Styling

Beim Stylen von HTML-Elementen stößt man häufig auf eindeutige Bezeichner neben der Primärklasse. Im bereitgestellten Szenario werden mehrere Divs mit der Klasse „tocolor“ gestaltet, aber jedes erfordert einen zusätzlichen eindeutigen Bezeichner, wie „tocolor-1“, „tocolor-2“ usw.

Die Frage entsteht: Gibt es eine Möglichkeit, dies durch die Verwendung eines Platzhalters () im CSS-Selektor zu optimieren? Der erste Versuch mit „.tocolor-“ ergab keine Ergebnisse.

Die Lösung liegt in der Nutzung von Attributselektoren. Mit Attributselektoren können Sie Elemente basierend auf ihren Attributen, beispielsweise ihrer Klasse, gezielt auswählen. In diesem Fall würden die folgenden Selektoren den gewünschten Effekt erzielen:

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

Der Selektor „[class^="tocolor-"]“ zielt auf Elemente ab, deren Klassenattribut mit „tocolor-“ beginnt, während das „ Der Selektor [class*=" tocolor-"]" zielt auf Elemente ab, deren Klassenattribut die Teilzeichenfolge „tocolor-" nach einem Leerzeichen enthält.

Aufschlüsselung der Selektoren:

• "[class^="tocolor-"]": Entspricht Elementen mit Klassenattributen, die mit „tocolor-“ beginnen, wie z. B. „tocolor-1“, „tocolor-“ 2“ und so weiter.
• “[class*=" tocolor-"]": Entspricht Elementen mit Klassenattributen, die die Teilzeichenfolge „tocolor-" enthalten, der unmittelbar ein Leerzeichen vorangestellt ist Zeichen wie „tocolor-1“, „test tocolor-2“ usw.

Durch die Verwendung dieser Attributselektoren können Sie den gewünschten Stil auf mehrere Elemente mit unterschiedlichen eindeutigen Bezeichnern anwenden ein einzelner Klassenselektor. Dies vereinfacht den CSS-Code und verbessert die Wartbarkeit.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Platzhalter das Styling dynamischer Klassen mit eindeutigen Bezeichnern optimieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!